/* ============================================================
   tokens.css — the single source of truth for the design system
   ------------------------------------------------------------
   Every colour, gradient, radius, shadow, spacing step and type
   step lives here. No component file may contain a raw hex value.
   To rebrand the app, change the gradient stops below and nothing
   else.

   Contrast: every text/background pair defined here was measured
   against WCAG AA (4.5:1 for body text). See the note on
   --grad-cta for the one place the brief's exact gradient could
   not be used verbatim.
   ============================================================ */

/* ---------- self-hosted faces ---------------------------------
   Display: Source Serif 4 — a transitional serif with genuine
   institutional weight; reads like a statement header or a legal
   filing rather than a startup landing page. Used sparingly.
   Body/UI: Public Sans — the typeface of the US Web Design System,
   built for regulated government interfaces. Highly legible at
   small sizes and has true tabular figures, which this app needs
   because it is mostly date and percentage columns.
   -------------------------------------------------------------- */
@font-face {
  font-family: "Public Sans"; font-style: normal; font-weight: 400;
  font-display: swap; src: url("fonts/public-sans-400.woff2") format("woff2");
}
@font-face {
  font-family: "Public Sans"; font-style: normal; font-weight: 500;
  font-display: swap; src: url("fonts/public-sans-500.woff2") format("woff2");
}
@font-face {
  font-family: "Public Sans"; font-style: normal; font-weight: 600;
  font-display: swap; src: url("fonts/public-sans-600.woff2") format("woff2");
}
@font-face {
  font-family: "Public Sans"; font-style: normal; font-weight: 700;
  font-display: swap; src: url("fonts/public-sans-700.woff2") format("woff2");
}
@font-face {
  font-family: "Source Serif 4"; font-style: normal; font-weight: 600;
  font-display: swap; src: url("fonts/source-serif-4-600.woff2") format("woff2");
}
@font-face {
  font-family: "Source Serif 4"; font-style: normal; font-weight: 700;
  font-display: swap; src: url("fonts/source-serif-4-700.woff2") format("woff2");
}

:root {
  /* ---------- brand gradients ----------
     Foothill green, matching the company PDF and the time-reporting
     site. Used ONLY where no text sits on top: the logo mark and
     progress-bar fills. */
  --brand-from:   #143D1C;
  --brand-to:     #5FBF46;
  --grad-brand:   linear-gradient(135deg, var(--brand-from) 0%, var(--brand-to) 100%);

  /* CTA gradient. White text on the full brand gradient measures
     2.33:1 at the bright end — far below AA. This is the same ramp
     truncated at 45%, so it still reads as the brand gradient but
     every point clears 5.41:1 against white. */
  --cta-to:       #36782F;
  --grad-cta:     linear-gradient(120deg, var(--brand-from) 0%, var(--cta-to) 100%);
  --grad-cta-hi:  linear-gradient(120deg, #1F5C2E 0%, #3D8533 100%);

  /* Secondary gradients, decorative accents only — never behind text. */
  --grad-success:   linear-gradient(120deg, #42E695 0%, #3BB2B8 100%);
  --grad-info:      linear-gradient(120deg, #17EAD9 0%, #6078EA 100%);
  --grad-attention: linear-gradient(120deg, #F54EA2 0%, #FF7676 100%);

  /* solid brand colours for focus rings, links and small marks */
  --brand:        #1F5C2E;   /* 7.99:1 on white */
  --brand-soft:   #EAF6EA;
  --brand-ring:   rgba(31, 92, 46, .32);

  /* ---------- surfaces + text ---------- */
  --bg:           #F7F8FA;
  --surface:      #FFFFFF;
  --surface-2:    #F1F3F7;
  --surface-3:    #E9ECF3;
  --ink:          #0F1222;   /* 17.49:1 on --bg */
  --ink-2:        #3D4256;   /*  9.36:1 on --bg */
  --ink-3:        #5C6377;   /*  5.64:1 on --bg */
  --on-brand:     #FFFFFF;
  --line:         #E4E7EE;
  --line-strong:  #CDD2DE;

  /* ---------- flat status colours ----------
     Meaning-carrying states are always flat and high-contrast,
     never rendered on a gradient. Ratios measured, all >= 5.6:1. */
  --st-late-bg:   #FDE7EC;  --st-late-fg:   #9F1239;  /* 6.80:1 */
  --st-now-bg:    #FFF3E0;  --st-now-fg:    #8A4B00;  /* 6.20:1 */
  --st-ok-bg:     #E4F8EE;  --st-ok-fg:     #0F6E43;  /* 5.69:1 */
  --st-soon-bg:   #EEF1FE;  --st-soon-fg:   #33409E;  /* 7.88:1 */
  --st-none-bg:   #EEF0F5;  --st-none-fg:   #4A5060;  /* 7.06:1 */
  --danger:       #B3261E;
  --danger-bg:    #FDECEA;

  /* channel chips — flat, distinguishable, all >= 4.5:1 */
  --ch-dialer-bg: #E7F6EC;  --ch-dialer-fg: #1B6B39;
  --ch-email-bg:  #E7F0FB;  --ch-email-fg:  #1B4F87;
  --ch-text-bg:   #F0EAFB;  --ch-text-fg:   #5B2E93;
  --ch-offer-bg:  #FDF0DC;  --ch-offer-fg:  #855209;
  --ch-other-bg:  #EDEFF3;  --ch-other-fg:  #4A5060;

  /* ---------- spacing scale (4px base) ---------- */
  --sp-1:  4px;   --sp-2:  8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 20px;   --sp-6: 24px;   --sp-8: 32px;  --sp-10: 40px;
  --sp-12: 48px;  --sp-16: 64px;

  /* ---------- radii ---------- */
  --r-sm:   6px;
  --r-md:  10px;
  --r-lg:  14px;
  --r-xl:  20px;
  --r-pill: 999px;

  /* ---------- shadows (soft, low-contrast) ---------- */
  --sh-1: 0 1px 2px rgba(15,18,34,.04), 0 1px 3px rgba(15,18,34,.05);
  --sh-2: 0 2px 4px rgba(15,18,34,.03), 0 8px 20px rgba(15,18,34,.06);
  --sh-3: 0 12px 32px rgba(15,18,34,.10);
  --sh-pop: 0 18px 48px rgba(15,18,34,.18);
  --focus: 0 0 0 3px var(--brand-ring);

  /* ---------- typography ---------- */
  --font-display: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-body: "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --fs-xs:   0.75rem;    /* 12 */
  --fs-sm:   0.8125rem;  /* 13 */
  --fs-base: 0.875rem;   /* 14 — admin density */
  --fs-md:   1rem;       /* 16 */
  --fs-lg:   1.125rem;   /* 18 */
  --fs-xl:   1.375rem;   /* 22 */
  --fs-2xl:  1.75rem;    /* 28 */
  --fs-3xl:  2.25rem;    /* 36 */

  --lh-tight:   1.2;
  --lh-snug:    1.35;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;

  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semi:   600;
  --fw-bold:   700;

  --track-caps: .06em;   /* letter-spacing for small caps labels */

  --maxw: 1140px;
}

/* ============================================================
   Dark mode. It came free once everything was tokenised: only the
   surface and text tokens are redefined, no component rules change.
   Contrast was re-measured for every pair below.
   ============================================================ */
body.dark {
  --bg:          #0E1017;
  --surface:     #161A24;
  --surface-2:   #1D2230;
  --surface-3:   #262C3C;
  --ink:         #F2F4F9;   /* 16.4:1 on --bg */
  --ink-2:       #C3C9D8;   /* 10.6:1 on --bg */
  --ink-3:       #99A1B5;   /*  6.4:1 on --bg */
  --line:        #262C3B;
  --line-strong: #39415580;

  /* links and small brand marks need a light green here — the solid
     brand green is only 2.18:1 on the dark surface */
  --brand:       #7FD46B;   /* 9.55:1 on --surface, 10.43:1 on --bg */
  --brand-soft:  #16281A;
  --brand-ring:  rgba(95, 191, 70, .38);

  --st-late-bg:  #3A1520;  --st-late-fg:  #FFB3C1;
  --st-now-bg:   #33260D;  --st-now-fg:   #F5CE86;
  --st-ok-bg:    #10301F;  --st-ok-fg:    #86E3B4;
  --st-soon-bg:  #1A2040;  --st-soon-fg:  #B3BEF5;
  --st-none-bg:  #232838;  --st-none-fg:  #B6BECD;
  --danger:      #FF9A93;
  --danger-bg:   #3A1B18;

  --ch-dialer-bg: #10301F; --ch-dialer-fg: #86E3B4;
  --ch-email-bg:  #12263D; --ch-email-fg:  #9CC7F2;
  --ch-text-bg:   #26183D; --ch-text-fg:   #CBAEF5;
  --ch-offer-bg:  #33280D; --ch-offer-fg:  #F0CD7D;
  --ch-other-bg:  #232838; --ch-other-fg:  #B6BECD;

  --sh-1: 0 1px 2px rgba(0,0,0,.35);
  --sh-2: 0 2px 6px rgba(0,0,0,.35), 0 10px 24px rgba(0,0,0,.30);
  --sh-3: 0 14px 36px rgba(0,0,0,.45);
  --sh-pop: 0 20px 52px rgba(0,0,0,.55);
}