/* static/brand/tokens.css — the Tate Law brand, as live on www.tateesq.com.
 *
 * BRAND SOURCE: the live site repo finly-ai-dev/CM_TATEESQ (origin/main).
 *   assets/css/_variables.scss  base colors + the "Canonical dark-reading
 *                               palette" (--reading-background/-ink/-muted/-rule)
 *   assets/css/browse.scss      the browse theme (dark default + light) used on
 *                               /learn, /calculators and blog posts
 *
 * This file is that brand's ONE MIRROR IN THIS REPO. Every brand color, face,
 * shadow and radius is declared here once, as a --brand-* custom property,
 * and every other stylesheet consumes these variables:
 *
 *   static/brand/public.css        public calculators, /options, /intake
 *                                  (the "browse" look: dark default + light)
 *   static/ui/tokens.css           internal staff dashboards (utilitarian)
 *   static/booking/theme-live.css  client booking / upload / onboarding /
 *                                  lead-form shell (dark browse theme only)
 *
 * The current site design is the "browse" theme family on /learn,
 * /learn/library and /calculators (CM_TATEESQ assets/css/browse.scss):
 * dark by default with a light variant, flat surfaces with 1px rules,
 * 18px card radius, violet/lavender accent pills, F37 Judge two-tone H1s,
 * Labil Grotesk everything else, sentence case (no tiny uppercase
 * eyebrows). Article pages (/learn/<slug>) use the dark "reading" theme:
 * the same night palette with salmon links and accents. The global header
 * keeps the salmon "Let's talk" pill. Mirrored from CM_TATEESQ origin/main
 * (_variables.scss, browse.scss, pages/learn/_slug.vue) and checked against
 * the live pages on 2026-10-04.
 *
 * If CM_TATEESQ changes, re-mirror it HERE. Do not copy these hex values
 * into another file, and do not invent a parallel palette: the old "Finly
 * Design System" (Cheltenham + Inter, moss green / sunbeam yellow) is
 * retired and must not be used or rebuilt.
 *
 * Declarations only: no element or component rules live in this file, so any
 * page can load it without side effects. Page-local palettes on the live
 * site (the green IBR / mortgage calculator workspaces) are not brand tokens.
 */

/* ── Brand faces (self-hosted foundry files) ──────────────────────────────
   woff2 first (the foundry-supplied files — Kometa order 31045736 and the
   F37 web kit, both in Drive/Tate-Fonts; identical glyphs to the .woff,
   ~10% smaller), .woff kept as the fallback. Both EULAs (Kometa v1.5 §Web,
   F37 Webfont 2023 §1.6.8) prohibit converting or subsetting, so these are
   the foundries' own files: copy them as-is, never re-encode them. The
   <link rel=preload> hrefs in templates/booking/_shell.html must match the
   woff2 url() byte-for-byte.

   The live site names one family per weight (weights are family names, no
   font-weight descriptors), and the vendored booking CSS depends on those
   names. "Labil Grotesk" and "F37 Judge" below are the same files declared
   as weight-aware families for pages that set font-weight: a browser asking
   for 600/700 gets the real Bold cut instead of a synthesized one. Same URLs,
   so the file downloads once. */
@font-face {
  font-family: "F37Judge-BoldItalic";
  src: url(/static/booking/fonts/F37Judge-BoldItalic.woff2) format("woff2"),
       url(/static/booking/fonts/F37Judge-BoldItalic.woff) format("woff");
  font-display: swap;
}
@font-face {
  font-family: "LabilGrotesk-Bold";
  src: url(/static/booking/fonts/LabilGrotesk-Bold.woff2) format("woff2"),
       url(/static/booking/fonts/LabilGrotesk-Bold.woff) format("woff");
  font-display: swap;
}
@font-face {
  font-family: "LabilGrotesk-Regular";
  src: url(/static/booking/fonts/LabilGrotesk-Regular.woff2) format("woff2"),
       url(/static/booking/fonts/LabilGrotesk-Regular.woff) format("woff");
  font-display: swap;
}
@font-face {
  font-family: "Labil Grotesk";
  src: url(/static/booking/fonts/LabilGrotesk-Regular.woff2) format("woff2"),
       url(/static/booking/fonts/LabilGrotesk-Regular.woff) format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Labil Grotesk";
  src: url(/static/booking/fonts/LabilGrotesk-Bold.woff2) format("woff2"),
       url(/static/booking/fonts/LabilGrotesk-Bold.woff) format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "F37 Judge";
  src: url(/static/booking/fonts/F37Judge-BoldItalic.woff2) format("woff2"),
       url(/static/booking/fonts/F37Judge-BoldItalic.woff) format("woff");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ── Type ───────────────────────────────────────────────────────────────
     Display: F37 Judge Bold Italic for hero H1s (UPPERCASE on the hubs,
     second line in the accent color). Everything else: Labil Grotesk;
     Bold is its own family upstream, so font-weight alone does nothing
     with the per-weight names — use --brand-font-bold, or the
     weight-aware --brand-font-sans. */
  --brand-font-display: "F37Judge-BoldItalic", Georgia, serif;
  --brand-font-body: "LabilGrotesk-Regular", "Helvetica Neue", Arial, sans-serif;
  --brand-font-bold: "LabilGrotesk-Bold", "Helvetica Neue", Arial, sans-serif;
  --brand-font-sans: "Labil Grotesk", "Helvetica Neue", Arial, sans-serif;
  --brand-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* ── Core palette (global site tokens, _variables.scss) ─────────────── */
  --brand-navy: #292e46;         /* ink on light; navy pills */
  --brand-ink: #1e1e1e;          /* "dark grey" body ink on the older pages */
  --brand-white: #ffffff;
  --brand-salmon: #ff987c;       /* header "Let's talk" pill, help card, article links */
  --brand-marigold: #ffd469;     /* focus ring on dark, highlights */
  --brand-slate: #4f5687;        /* older page field; booking shell; menu borders */
  --brand-error: #ff0000;

  /* Logo-mark colors (static/booking/logos/mark-black.svg, mark-color.png);
     the mark's other two colors are --brand-marigold and --brand-salmon. */
  --brand-sage: #a4b08a;
  --brand-periwinkle: #717bc1;

  /* ── Browse theme, light (?theme=light on the live hubs) ────────────── */
  --brand-paper: #f7f7f3;        /* page */
  --brand-violet: #65518a;       /* accent: H1 2nd line, primary pills, current link, focus */
  --brand-muted: #626477;        /* secondary text */
  --brand-rule: #d7d5de;         /* 1px rules + card borders */
  --brand-input-line: #777487;   /* input + chip outlines */
  /* surfaces and controls: --brand-white; ink: --brand-navy */

  /* ── Browse theme, dark (the live default) + article reading theme ──── */
  --brand-night: #1d192c;        /* page */
  --brand-night-surface: #292338;/* cards */
  --brand-night-control: #211c30;/* input fills */
  --brand-cream: #f5f0e8;        /* ink on night */
  --brand-night-muted: #c0b7cd;  /* secondary text */
  --brand-lavender: #b7a4d4;     /* accent on night (violet's dark twin) */
  --brand-night-rule: #484054;   /* 1px rules + card borders */
  --brand-night-input-line: #9c90aa;
  /* focus on night: --brand-marigold. Reading theme accents: --brand-salmon. */

  /* Canonical dark-reading palette, under its upstream names
     (_variables.scss: --reading-background/-ink/-muted/-rule). */
  --brand-reading-background: var(--brand-night);
  --brand-reading-ink: var(--brand-cream);
  --brand-reading-muted: var(--brand-night-muted);
  --brand-reading-rule: var(--brand-night-rule);
  --brand-reading-callout: #272137;
  --brand-reading-table: #30283f;

  /* ── Older light recipe (live site's legacy calculator kit + pale-grey
     article modules). The staff UI kit still uses some of these. */
  --brand-tint-100: #e7e9f3;
  --brand-tint-200: #ccd0e4;
  --brand-tint-400: #8b91b7;
  --brand-grey-50: #f6f6f6;      /* "pale grey": inset zones, article modules */
  --brand-grey-100: #ededed;
  --brand-grey-200: #e4e4e4;
  --brand-grey-300: #d6d6d6;
  --brand-grey-400: #9a9a9a;     /* decorative only: fails AA as text */
  --brand-grey-600: #757575;

  /* RGB triplets of the same colors, for rgba() alpha washes */
  --brand-slate-rgb: 79, 86, 135;
  --brand-navy-rgb: 41, 46, 70;
  --brand-shadow-rgb: 46, 50, 71;       /* navy-tinted ambient shadow */
  --brand-warm-shadow-rgb: 57, 34, 28;  /* warm glow under legacy pills */

  /* ── Shape + depth ──────────────────────────────────────────────────────
     Browse pages are flat: 1px rules, no shadows. The older recipe uses
     soft ambient, navy-tinted shadows — never hard drops. */
  --brand-radius-card: 18px;      /* browse cards, goal tiles, help card */
  --brand-radius-panel-inner: 16px;
  --brand-radius-input: 8px;      /* browse inputs */
  --brand-radius-module: 12px;    /* article modules */
  --brand-radius-pill: 999px;     /* every button, chip, toggle */
  --brand-radius-panel: 28px;     /* older white panel on the slate field (legacy) */
  --brand-radius-panel-sm: 24px;  /* the same panel at phone width */

  --brand-shadow-1: 0 0 40px 0 rgba(var(--brand-shadow-rgb), 0.12);
  --brand-shadow-2: 0 0 40px 0 rgba(var(--brand-shadow-rgb), 0.2);
  --brand-shadow-card: 0 0 40px 0 rgba(var(--brand-warm-shadow-rgb), 0.125);
  --brand-shadow-panel: 0 0 40px 0 rgba(var(--brand-navy-rgb), 0.25);
  --brand-shadow-lift: 0 18px 44px rgba(var(--brand-navy-rgb), 0.16);
  --brand-shadow-menu: 0 16px 36px rgba(var(--brand-navy-rgb), 0.2);
}