/* =====================================================================
   CoPilot Data quote builder — design tokens

   The palette is the live copilotdata.com Webflow stylesheet, not
   something derived here. The named brand values are used verbatim:

     teal-900 #1b9097   teal-700 #2faeb4   teal-500 #35b8be (primary)
     teal-300 #5ac4c9   navy #28224b       slate #546285
     blue #1875f0       surface #fafafa    border #e1e6ee   ink #08090a

   Two colours are deliberately absent. #3898ec is Webflow's stock
   default and not a brand colour. #0096ff is the *document* blue — it
   belongs on the printed quote (packages/document prints the table
   header in it) and nowhere in the web chrome. The web accent is the
   teal.

   Where a brand value does not clear WCAG AA against its own
   background, a darkened member of the same family carries the text and
   the verbatim value carries the fill. Every such pair is noted with
   its measured ratio.

   Dark mode is built from the same family rather than inverted: the
   teal holds up on a dark ground and keeps its job, while navy — which
   would vanish as text — is replaced by a near-white and survives only
   as the ground the theme is mixed from.
   ===================================================================== */

:root {
  color-scheme: light dark;

  /* ---- type ------------------------------------------------------ */
  /* Inter, and only Inter: the site declares `font-family: Inter, sans-serif`
     as its base, and the embed drops into pages that already load it. Matching
     beats expressing here — the display face is the same family at a heavier
     weight and tighter tracking, not a second typeface. */
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: var(--font-body);
  --font-mono: ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, monospace;

  /* A 1.22 scale, held to everywhere. Sizes are rem so a district laptop
     with a bumped default font size scales the whole interface. */
  --t-2xs: 0.6875rem;  /* 11 — chips, campus numbers */
  --t-xs: 0.75rem;     /* 12 — meta lines */
  --t-sm: 0.8125rem;   /* 13 — secondary UI */
  --t-base: 0.9375rem; /* 15 — body, form controls */
  --t-md: 1.0625rem;   /* 17 — card titles */
  --t-lg: 1.3125rem;   /* 21 — step headings */
  --t-xl: 1.625rem;    /* 26 — running total */
  --t-2xl: 2.125rem;   /* 34 — the money figure on review */

  --lh-tight: 1.15;
  --lh-snug: 1.35;
  --lh-body: 1.55;

  /* ---- space ----------------------------------------------------- */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.25rem;
  --s-6: 1.5rem;
  --s-7: 2rem;
  --s-8: 2.5rem;
  --s-9: 3rem;

  /* ---- shape ----------------------------------------------------- */
  --r-xs: 4px;
  --r-sm: 7px;
  --r-md: 11px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-pill: 999px;

  --border: 1px solid var(--line);
  --ring: 0 0 0 2px var(--surface), 0 0 0 4px var(--focus);

  /* ---- motion ---------------------------------------------------- */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-fast: 110ms;
  --dur: 200ms;

  /* ================= light ================= */

  /* Grounds. The brand's own #fafafa is the inset/hover surface; the page sits
     one step below it so a white card reads without a heavy shadow, which is
     how the site itself is built (hairlines, not elevation). */
  --bg: #f0f2f6;
  --bg-grad: radial-gradient(120% 90% at 50% -20%, #ffffff 0%, #f6f7fa 55%, #eceff5 100%);
  --surface: #ffffff;
  --surface-2: #fafafa;
  --surface-3: #f2f4f8;
  --surface-inset: #fafafa;

  --ink: #28224b;    /* navy, verbatim — 14.8:1 on white */
  --ink-2: #3b3f63;  /* 10.1:1 */
  --ink-3: #546285;  /* slate, verbatim — 6.1:1 */
  --ink-4: #606c87;  /* 5.3:1 on white, 4.7:1 on --bg — the campus number and
                        the "(optional)" tag are real text, so this has to clear AA */

  --line: #e1e6ee;   /* border, verbatim */
  --line-2: #ccd4e1;

  /* Teal — the primary accent. #35b8be is the Aviator card's teal and is used
     verbatim as a fill; on white it measures 2.4:1, which is under the 3:1 a
     state indicator needs, so borders, rings and `accent-color` take
     --brand-line (teal-900, 3.8:1) and teal *text* takes --brand-ink (5.0:1). */
  --brand: #35b8be;
  --brand-strong: #2faeb4;
  --brand-line: #1b9097;
  --brand-ink: #157c82;
  --brand-soft: #edf9fa;
  --brand-edge: #a2dde1;
  --on-brand: #28224b; /* navy on teal — 6.2:1 */

  /* A deeper teal marks what is settled rather than active: a completed step, a
     confirmed figure, an applied discount. Same family, read by depth, and
     never the only signal — every one of them also carries a glyph or a word. */
  --accent: #127075;
  --accent-soft: #ddf1f2;
  --accent-edge: #8ed2d6;

  /* The site's CTA/link blue. #1875f0 is 4.3:1 white-on-it, just under AA, so
     the text colour is one step darker in the same hue (5.2:1). The primary
     *button* is the brand teal — the colour of the pricing page's own
     "Request Invoice" buttons — so this carries links and inline text only. */
  --cta: #1668d8;
  --cta-strong: #155fc4;
  --cta-soft: #e8f1fe;
  --cta-edge: #b9d4fb;
  --on-cta: #ffffff;

  --warn: #8a5a00;
  --warn-soft: #fff3dc;
  --warn-edge: #e8c88a;

  --danger: #b32318;
  --danger-soft: #fdeceb;
  --danger-edge: #f0b4af;

  --ok: #127075;
  --ok-soft: #ddf1f2;

  --focus: #1668d8;
  --shadow-sm: 0 1px 2px rgb(40 34 75 / 0.06), 0 1px 1px rgb(40 34 75 / 0.04);
  --shadow-md: 0 6px 20px -8px rgb(40 34 75 / 0.18), 0 2px 6px -2px rgb(40 34 75 / 0.08);
  --shadow-lg: 0 24px 60px -24px rgb(40 34 75 / 0.35), 0 6px 16px -8px rgb(40 34 75 / 0.12);

  /* The document preview is paper: it stays white in both themes and sits on a
     darker mat, the way a print proof does. */
  --paper: #ffffff;
  --mat: #e3e7f0;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* The ground is the brand navy taken down, so the dark theme is the same
       hue family rather than a neutral grey. */
    --bg: #12101f;
    --bg-grad: radial-gradient(120% 90% at 50% -20%, #262247 0%, #17142b 55%, #12101f 100%);
    --surface: #1b1832;
    --surface-2: #221f3d;
    --surface-3: #2a2649;
    --surface-inset: #16142a;

    /* Navy cannot carry text here; a near-white does, and slate lifts to stay
       above 4.5:1 on --surface. */
    --ink: #eef0f6;   /* 15.1:1 on --surface */
    --ink-2: #cdd2e2; /* 11.4:1 */
    --ink-3: #9aa3bd; /* 6.8:1 */
    --ink-4: #7a839d; /* 4.6:1 */

    --line: #322e52;
    --line-2: #494470;

    /* The teal needs no help on a dark ground: #35b8be is 7.2:1 on --surface,
       so the verbatim brand value carries fills, borders and text alike. */
    --brand: #35b8be;
    --brand-strong: #5ac4c9;
    --brand-line: #35b8be;
    --brand-ink: #5ac4c9; /* 8.3:1 */
    --brand-soft: #14343a;
    --brand-edge: #256268;
    --on-brand: #08090a;

    --accent: #5ac4c9;
    --accent-soft: #102e33;
    --accent-edge: #1f5a5f;

    /* #1668d8 as text is only 3.3:1 on this ground, so the link blue lifts to a
       tint: 8.2:1 on --surface, 9.4:1 on the document mat. */
    --cta: #8fb4f5;
    --cta-strong: #b6cffa;
    --cta-soft: #16264a;
    --cta-edge: #2b4a80;
    --on-cta: #08090a;

    --warn: #f0be6a;
    --warn-soft: #322611;
    --warn-edge: #5d4820;

    --danger: #ff9c93;
    --danger-soft: #3a1a18;
    --danger-edge: #6b2c27;

    --ok: #5ac4c9;
    --ok-soft: #102e33;

    --focus: #8fb4f5;
    --ring: 0 0 0 2px var(--surface), 0 0 0 4px var(--focus);
    --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.5);
    --shadow-md: 0 8px 24px -10px rgb(0 0 0 / 0.7), 0 2px 6px -2px rgb(0 0 0 / 0.4);
    --shadow-lg: 0 28px 70px -28px rgb(0 0 0 / 0.85), 0 8px 20px -10px rgb(0 0 0 / 0.5);

    --paper: #ffffff;
    --mat: #0b0917;
  }
}