/* ==========================================================================
   GV Staffing — Design Tokens
   Single source of truth for colour, type, spacing, radius, shadow and motion.
   Every other stylesheet (site.css, admin.css, print.css) consumes these
   variables; change a value here and it propagates everywhere.
   ========================================================================== */

:root {
  /* ---- Brand palette ---------------------------------------------------- */
  --gv-navy:        #111827;  /* Primary  — nav, headings, footer, dark bands */
  --gv-blue:        #2563EB;  /* CTA      — primary buttons, links, active    */
  --gv-teal:        #14B8A6;  /* Accent   — highlights, success, key metrics  */
  --gv-cloud:       #F8FAFC;  /* Background                                   */
  --gv-slate:       #64748B;  /* Secondary text                               */
  --gv-line:        #E2E8F0;  /* Borders, dividers, card outlines             */
  --gv-white:       #FFFFFF;  /* Cards, forms, contrast sections              */

  /* Derived shades (kept minimal; only what components actually need) */
  --gv-navy-800:    #1F2937;
  --gv-navy-700:    #374151;
  --gv-blue-700:    #1D4ED8;  /* hover / pressed CTA */
  --gv-blue-50:     #EFF6FF;  /* tinted backgrounds, focus fills */
  --gv-teal-700:    #0F766E;  /* teal text on white (AA contrast) */
  --gv-teal-50:     #F0FDFA;
  --gv-slate-600:   #475569;  /* slate text on cloud bg when extra contrast needed */
  --gv-line-strong: #CBD5E1;

  /* Status colours (dashboard badges, alerts) */
  --gv-success:     #0F766E;
  --gv-success-bg:  #F0FDFA;
  --gv-warning:     #B45309;
  --gv-warning-bg:  #FFFBEB;
  --gv-danger:      #B91C1C;
  --gv-danger-bg:   #FEF2F2;
  --gv-info:        #1D4ED8;
  --gv-info-bg:     #EFF6FF;
  --gv-muted-bg:    #F1F5F9;

  /* ---- Semantic aliases (use these in components) ---------------------- */
  --color-bg:            var(--gv-cloud);
  --color-surface:       var(--gv-white);
  --color-surface-dark:  var(--gv-navy);
  --color-text:          var(--gv-navy);
  --color-text-muted:    var(--gv-slate);
  --color-text-inverse:  var(--gv-white);
  --color-text-inverse-muted: #CBD5E1;
  --color-border:        var(--gv-line);
  --color-border-strong: var(--gv-line-strong);
  --color-cta:           var(--gv-blue);
  --color-cta-hover:     var(--gv-blue-700);
  --color-link:          var(--gv-blue);
  --color-accent:        var(--gv-teal);
  --color-accent-text:   var(--gv-teal-700);
  --color-focus:         var(--gv-blue);

  /* ---- Typography ------------------------------------------------------- */
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Fluid type scale (min @ 360px → max @ 1280px) */
  --text-xs:   0.75rem;                                   /* 12 */
  --text-sm:   0.875rem;                                  /* 14 */
  --text-base: 1rem;                                      /* 16 */
  --text-md:   1.0625rem;                                 /* 17 — body copy on marketing pages */
  --text-lg:   1.125rem;                                  /* 18 */
  --text-xl:   clamp(1.25rem, 1.15rem + 0.4vw, 1.375rem);  /* 20–22 */
  --text-2xl:  clamp(1.5rem, 1.3rem + 0.8vw, 1.875rem);   /* 24–30 */
  --text-3xl:  clamp(1.875rem, 1.5rem + 1.5vw, 2.5rem);   /* 30–40 */
  --text-4xl:  clamp(2.25rem, 1.6rem + 2.6vw, 3.5rem);    /* 36–56 */

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  --leading-tight:   1.15;
  --leading-snug:    1.3;
  --leading-normal:  1.6;

  --tracking-tight:  -0.02em;
  --tracking-wide:   0.08em;   /* eyebrows / overlines */

  /* ---- Spacing (4px base) ---------------------------------------------- */
  --space-1:  0.25rem;   /*  4 */
  --space-2:  0.5rem;    /*  8 */
  --space-3:  0.75rem;   /* 12 */
  --space-4:  1rem;      /* 16 */
  --space-5:  1.25rem;   /* 20 */
  --space-6:  1.5rem;    /* 24 */
  --space-8:  2rem;      /* 32 */
  --space-10: 2.5rem;    /* 40 */
  --space-12: 3rem;      /* 48 */
  --space-16: 4rem;      /* 64 */
  --space-20: 5rem;      /* 80 */
  --space-24: 6rem;      /* 96 */

  --section-y: clamp(3.5rem, 2.5rem + 4vw, 6rem);   /* vertical rhythm between page sections */

  /* ---- Layout ----------------------------------------------------------- */
  --container-max:    1200px;
  --container-narrow: 760px;
  --container-gutter: 1rem;      /* 16px phone gutter; grows on larger screens */
  --header-height:    68px;
  --sidebar-width:    248px;     /* admin */

  /* ---- Radius (restrained) --------------------------------------------- */
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   10px;
  --radius-pill: 999px;

  /* ---- Elevation -------------------------------------------------------- */
  --shadow-xs: 0 1px 2px rgba(17, 24, 39, 0.05);
  --shadow-sm: 0 1px 3px rgba(17, 24, 39, 0.08), 0 1px 2px rgba(17, 24, 39, 0.04);
  --shadow-md: 0 6px 16px -4px rgba(17, 24, 39, 0.10), 0 2px 4px rgba(17, 24, 39, 0.04);
  --shadow-lg: 0 18px 40px -12px rgba(17, 24, 39, 0.18);
  --ring-focus: 0 0 0 3px rgba(37, 99, 235, 0.35);

  /* ---- Motion ----------------------------------------------------------- */
  --ease-out:   cubic-bezier(0.2, 0.8, 0.2, 1);
  --duration-1: 120ms;
  --duration-2: 200ms;

  /* ---- Z-index ---------------------------------------------------------- */
  --z-header:  50;
  --z-overlay: 90;
  --z-modal:   100;
}

/* ==========================================================================
   Public-site extension (2026-10 redesign, RepStack-inspired direction)
   Additive only: the values above are shared with the admin and unchanged.

   Typography decision:
     Display / headings: "Plus Jakarta Sans" 700–800 — a geometric grotesque with
     heavy weights for big, confident headlines (RepStack-style), still very
     legible at H3 sizes. Body / UI: "Inter" (unchanged). Both from Google Fonts
     with display=swap + preconnect; system fallbacks keep metrics close.
   Colour roles:
     Navy #111827  dark bands, headings, footer.
     Blue #2563EB  the single vivid accent: primary CTA, links, active states.
     Teal #14B8A6  sparing highlights: eyebrow dots, check icons, highlighted
                   words on dark (teal-300). On light backgrounds teal text uses
                   teal-700 (AA); highlighted headline words use blue (AA).
   ========================================================================== */
:root {
  --font-display: "Plus Jakarta Sans", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* Extra brand shades */
  --gv-navy-950:   #0B1120;   /* deepest band / footer bottom bar */
  --gv-navy-900:   #111827;   /* = navy */
  --gv-navy-600:   #4B5563;
  --gv-blue-800:   #1E40AF;
  --gv-blue-600:   #2563EB;
  --gv-blue-400:   #60A5FA;   /* links on navy (AA) */
  --gv-blue-300:   #93C5FD;
  --gv-blue-100:   #DBEAFE;
  --gv-teal-600:   #0D9488;
  --gv-teal-300:   #5EEAD4;   /* highlighted words / icons on navy (AA) */
  --gv-teal-100:   #CCFBF1;
  --gv-slate-400:  #94A3B8;
  --gv-slate-300:  #CBD5E1;
  --gv-slate-100:  #F1F5F9;

  /* Inverse (on navy) */
  --on-dark:        #FFFFFF;
  --on-dark-muted:  #CBD5E1;   /* 11.6:1 on navy */
  --on-dark-subtle: #94A3B8;   /* 6.9:1 on navy */
  --on-dark-line:   rgba(255, 255, 255, 0.10);
  --on-dark-card:   rgba(255, 255, 255, 0.04);

  /* Display type scale */
  --text-5xl:      clamp(2.375rem, 1.55rem + 3.6vw, 4.25rem);  /* 38–68 hero H1 */
  --text-display:  clamp(2rem, 1.3rem + 3vw, 3.5rem);          /* 32–56 statements */
  --text-h2:       clamp(1.875rem, 1.45rem + 1.9vw, 3rem);     /* 30–48 section H2 */
  --text-h3:       clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);     /* 20–24 */
  --leading-display: 1.06;
  --tracking-display: -0.03em;
  --tracking-eyebrow: 0.14em;

  /* Rhythm */
  --site-section-y: clamp(4rem, 2.6rem + 5.2vw, 7.5rem);
  --site-header-h:  68px;

  /* Radii (public site) */
  --site-radius-sm: 10px;
  --site-radius:    16px;
  --site-radius-lg: 24px;
  --site-radius-xl: 32px;

  /* Elevation (public site) */
  --shadow-card:  0 1px 2px rgba(15, 23, 42, 0.04), 0 10px 30px -18px rgba(15, 23, 42, 0.22);
  --shadow-hover: 0 2px 4px rgba(15, 23, 42, 0.04), 0 22px 44px -20px rgba(15, 23, 42, 0.30);
  --shadow-float: 0 2px 6px rgba(15, 23, 42, 0.06), 0 30px 60px -24px rgba(15, 23, 42, 0.35);
  --shadow-cta:   0 1px 2px rgba(37, 99, 235, 0.25), 0 8px 20px -8px rgba(37, 99, 235, 0.55);

  --duration-3: 320ms;
}
@media (min-width: 1024px) { :root { --site-header-h: 76px; } }
@media (prefers-reduced-motion: reduce) { :root { --duration-3: 0ms; } }


@media (min-width: 640px)  { :root { --container-gutter: 1.5rem; } }
@media (min-width: 1024px) { :root { --container-gutter: 2rem; } }

/* ==========================================================================
   Rich content (editor output: blog articles, page text blocks)
   Change these tokens to restyle every link, button, image and table that
   editors insert. Applied by the "Rich content" section at the end of site.css.
   ========================================================================== */
:root {
  /* Links inside text */
  --content-link:              var(--gv-blue);
  --content-link-hover:        var(--gv-blue-700);
  --content-link-underline:    rgba(37, 99, 235, 0.35);
  --content-link-weight:       var(--weight-medium);
  --content-link-underline-thickness: 1.5px;
  --content-link-underline-offset:    0.2em;

  /* Buttons inserted from the editor (link class "Button — primary / secondary") */
  --content-btn-radius:        var(--radius-pill);
  --content-btn-padding-y:     0.75rem;
  --content-btn-padding-x:     1.5rem;
  --content-btn-font-weight:   var(--weight-semibold);
  --content-btn-primary-bg:    var(--gv-blue);
  --content-btn-primary-bg-hover: var(--gv-blue-700);
  --content-btn-primary-text:  var(--gv-white);
  --content-btn-secondary-bg:  var(--gv-white);
  --content-btn-secondary-text: var(--gv-navy);
  --content-btn-secondary-border: var(--gv-line-strong);
  --content-btn-secondary-border-hover: var(--gv-navy);

  /* Images and text wrapping */
  --content-img-radius:        var(--radius-lg);
  --content-img-shadow:        var(--shadow-md);
  --content-img-wrap-width:    44%;    /* width of floated (wrapped) images on desktop */
  --content-img-wrap-max:      380px;
  --content-img-wrap-gap:      var(--space-6);  /* space between a wrapped image and the text */
  --content-img-margin-y:      var(--space-6);

  /* Tables */
  --content-table-radius:      var(--radius-lg);
  --content-table-border:      var(--gv-line);
  --content-table-head-bg:     var(--gv-navy);
  --content-table-head-text:   var(--gv-white);
  --content-table-row-alt:     var(--gv-cloud);     /* striped rows */
  --content-table-row-hover:   var(--gv-blue-50);
  --content-table-cell-pad-y:  0.75rem;
  --content-table-cell-pad-x:  1rem;
  --content-table-font-size:   var(--text-sm);
}

@media (prefers-reduced-motion: reduce) {
  :root { --duration-1: 0ms; --duration-2: 0ms; }
}