/* =====================================================================
   J.C. Equity Group: shared brand tokens (ONE source for site + social)
   Built 2026-10-02 from the LIVE site: /workspace/deploy-v10
     - :root block in index/about/apply/invest/learn.html (identical on all 5 pages)
     - styles-c.css (site chrome: focus ring, header, cookie banner, form states)
     - Kit v2 lock: marketing/KIT-V2-LOCK-2026-09-22.md +
       jc-equity-site/design-specs/one-look/SITE-TOKENS-V2-HANDOFF.md
   Do NOT invent values. Change a value here only after Head of Web confirms
   it changed on the live site (or James approves a kit change).
   2026-10-02: "Institutional prototype extension" block added at James's request
   (glass, duotone, reading tints, matte/charcoal roles). Not live yet; see BRAND.md.
   Spec mapping (design-system skill): colors -> --color-*, typography ->
   --type-<level>-{family|size|weight|leading|tracking}, spacing -> --space-*,
   radii -> --radius-*. Site aliases (--navy, --teal, ...) kept at the bottom.
   ===================================================================== */
:root {
  /* ---------- Colors (live site values) ---------- */
  --color-primary: #0B1F3A;        /* navy: wordmark, headings, primary CTA fill */
  --color-secondary: #123052;      /* navy-hover */
  --color-primary-deep: #071628;   /* navy-deep: dark panels/footer */
  --color-accent: #1F6F6A;         /* teal: rules, kickers, text links ONLY; never a button fill */
  --color-accent-hover: #1F6F6A;   /* no separate hover on site; keep teal */
  --color-accent-on-dark: #7EB8B4; /* teal-on-navy: kickers/focus ring on navy */
  --color-surface: #FFFFFF;        /* white */
  --color-surface-muted: #F4F5F7;  /* pale */
  --color-surface-alt: #F0F3F6;    /* kit v2 gray alt */
  --color-ink: #1A1A1A;            /* charcoal: body text */
  --color-ink-strong: #0A0A0A;     /* near-black */
  --color-ink-soft: #5A6570;       /* muted: captions, meta */
  --color-ink-3: #5A6570;          /* alias used by post generators (same as ink-soft) */
  --color-rule: #E2E5EA;           /* border / hairlines */
  --color-success: #1F6F6A;        /* site uses teal for success states */
  --color-danger: #9B2C2C;         /* form errors */
  /* No warning color on the live site: do not invent one. */

  /* ---------- Type families (site stacks; Source Serif Pro + Inter are installed on the box, so renders work offline) ---------- */
  --type-display-family: 'Source Serif 4','Source Serif Pro',Georgia,'Times New Roman',Times,serif;
  --type-sans-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --type-mono-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,'Liberation Mono',monospace; /* rarely used */

  /* ---------- Type scale: kit v2 desktop base (site uses clamp() equivalents, listed in BRAND.md) ---------- */
  --type-display-xl-family: var(--type-display-family);
  --type-display-xl-size: 56px;      /* live: clamp(2.25rem,1.4rem + 2.2vw,3.5rem) */
  --type-display-xl-weight: 600;
  --type-display-xl-leading: 1.143;  /* 56/64 */
  --type-display-xl-tracking: -0.015em;

  --type-display-lg-family: var(--type-display-family);  /* H1 */
  --type-display-lg-size: 40px;      /* live: clamp(1.85rem,1.2rem + 1.4vw,2.5rem) */
  --type-display-lg-weight: 600;
  --type-display-lg-leading: 1.2;    /* 40/48 */
  --type-display-lg-tracking: -0.015em;

  --type-headline-md-family: var(--type-display-family); /* H2 */
  --type-headline-md-size: 28px;     /* live: clamp(1.5rem,1.15rem + 0.7vw,1.75rem) */
  --type-headline-md-weight: 600;
  --type-headline-md-leading: 1.286; /* 28/36 */
  --type-headline-md-tracking: -0.01em;

  --type-headline-sm-family: var(--type-display-family); /* H3 */
  --type-headline-sm-size: 22px;     /* live: clamp(1.2rem,1.05rem + 0.35vw,1.375rem) */
  --type-headline-sm-weight: 600;
  --type-headline-sm-leading: 1.273; /* 22/28 */
  --type-headline-sm-tracking: -0.01em;

  --type-body-lg-family: var(--type-sans-family);  /* no 18px on site: body-lg = body */
  --type-body-lg-size: 16px;
  --type-body-lg-weight: 400;
  --type-body-lg-leading: 1.625;     /* 16/26 */

  --type-body-md-family: var(--type-sans-family);
  --type-body-md-size: 16px;
  --type-body-md-weight: 400;
  --type-body-md-leading: 1.625;     /* 16/26 */

  --type-ui-family: var(--type-sans-family);       /* buttons, nav */
  --type-ui-size: 14px;
  --type-ui-weight: 600;
  --type-ui-leading: 1.429;          /* 14/20 */

  --type-caption-family: var(--type-sans-family);  /* footers, legal micro */
  --type-caption-size: 12px;
  --type-caption-weight: 400;
  --type-caption-leading: 1.5;       /* 12/18 */

  --type-label-caps-family: var(--type-sans-family); /* kicker: uppercase, teal */
  --type-label-caps-size: 12px;
  --type-label-caps-weight: 600;
  --type-label-caps-leading: 1.333;  /* 12/16 */
  --type-label-caps-tracking: 0.08em;

  --type-code-family: var(--type-mono-family);
  --type-code-size: 14px;

  /* ---------- Spacing: kit v2 8pt scale ---------- */
  --space-base: 16px;
  --space-xs: 8px;    /* space/1 */
  --space-sm: 12px;
  --space-md: 16px;   /* space/2 */
  --space-lg: 24px;   /* space/3 */
  --space-xl: 32px;   /* space/4 */
  --space-2xl: 48px;  /* space/6 */
  --space-3xl: 64px;  /* space/8: section Y, social safe margin, wordmark clear space */
  --space-4xl: 96px;
  --space-section-y: clamp(4rem,5.5vw,6rem);
  --space-card-gap: clamp(1.5rem,2vw,2rem);
  --max-width: 1240px;

  /* ---------- Radii (deliberately near-square) ---------- */
  --radius-none: 0;
  --radius-sm: 2px;   /* buttons, inputs (site --radius) */
  --radius-md: 4px;   /* cards (site --radius-card) */
  --radius-full: 9999px; /* avatars only */

  /* ---------- Elevation (site uses sparingly) ---------- */
  --shadow-card: 0 2px 8px rgba(11,31,58,.05);
  --shadow-raised: 0 10px 30px rgba(11,31,58,.14);

  /* ---------- Buttons (kit v2) ---------- */
  --btn-height: 48px;
  --btn-padding-x: 24px;
  --btn-border: 1.5px;

  /* ---------- Focus ---------- */
  --focus-ring: 2px solid #0B1F3A;          /* offset 3px */
  --focus-ring-on-dark: 2px solid #7EB8B4;

  /* ---------- Social canvas scale (DERIVED for 1080px-wide canvases; not site values) ----------
     Site sizes are tuned for ~1440px screens viewed up close; feed images are viewed
     at ~350-400px wide on phones, so canvas type is scaled about 1.6-2x. Same families,
     weights and tracking as above. */
  --social-margin: 96px;            /* safe margin on 1080 canvases (>= kit 64) */
  --social-display-size: 76px;      --social-display-leading: 1.12;
  --social-headline-size: 52px;     --social-headline-leading: 1.18;
  --social-body-size: 30px;         --social-body-leading: 1.5;
  --social-kicker-size: 20px;       --social-kicker-tracking: 0.12em;
  --social-caption-size: 20px;      --social-caption-leading: 1.45;
  --social-rule-width: 72px;        --social-rule-height: 4px;

  /* ---------- Institutional prototype extension (added 2026-10-02 at James's request) ----------
     Source: /workspace/web/prototype-institutional-2026-10-02/assets/styles.css + assets/img/CREDITS.md
     (duotone export script /tmp/jce/tint.py). These are NOT on the live site (deploy-v10) yet.
     They're recorded here so the website and social posts share ONE set of values. A live deploy
     still needs Head of Web + Legal + James's yes. Contrast ratios were checked 2026-10-02. */
  /* Text tints (long-form reading). Every one passes AA on white and on pale. */
  --color-ink-reading: #2B3540;     /* standfirst, lede, long-form body: 12.5:1 on white, 11.4:1 on pale */
  --color-ink-secondary: #3A4550;   /* card/section descriptions, captions on light: 9.8:1 white, 9.0:1 pale */
  --color-on-dark-muted: #B9C4D0;   /* body/captions on navy: 9.3:1 on #0B1F3A, 10.3:1 on #071628 */
  --color-on-dark-strong: #E6EBF0;  /* footer nav + compliance titles on navy-deep: 15.2:1 */
  /* Surfaces + lines */
  --color-surface-matte: var(--color-ink-strong); /* "matte black" #0A0A0A: utility bars only (prototype banner, sample ribbon). Never a CTA */
  --color-charcoal: var(--color-ink);             /* #1A1A1A: same value as ink; named for briefs that say "charcoal" */
  --color-surface-selected: #F5F7FA;  /* selected radio/choice fill (navy text 15.4:1) */
  --color-surface-subtle: #FBFBFC;    /* table row headers */
  --color-surface-hover: #F8F9FB;     /* table row hover */
  --color-danger-surface: #FBF4F4;    /* error summary fill (danger text 6.9:1) */
  --color-control-border: #8A949E;    /* input/radio/checkbox borders: 3.08:1 on white (WCAG 1.4.11 non-text) */
  --color-rule-hover: #C9D0D8;        /* card hover border (the prototype also uses #B8C0C9 once; consolidate to this) */
  --color-media-placeholder: #DDE1E6;      /* photo loading background on light */
  --color-media-placeholder-dark: #0F2440; /* photo loading background inside navy lightbox */
  /* Glass (WEBSITE ONLY: backdrop blur needs content behind it, so social canvases stay flat) */
  --glass-header-bg: rgba(255,255,255,.78);
  --glass-header-filter: saturate(160%) blur(14px);
  --glass-header-border: rgba(11,31,58,.08);
  --glass-light-bg: rgba(255,255,255,.72);
  --glass-light-border: rgba(255,255,255,.9);
  --glass-light-shadow: 0 1px 0 rgba(11,31,58,.06), 0 10px 30px rgba(11,31,58,.14);
  --glass-dark-bg: rgba(11,31,58,.9);      /* navy glass panel (metrics, dark tool cards) */
  --glass-dark-border: rgba(255,255,255,.12);
  --glass-on-navy-bg: rgba(255,255,255,.06); /* lesson card on navy band */
  --glass-on-navy-border: rgba(255,255,255,.16);
  --glass-filter: blur(16px) saturate(140%);
  --glass-filter-sm: blur(12px);
  --scrim-lightbox: rgba(7,22,40,.72);     /* + blur(6px) */
  /* People-photo navy duotone (web AND social: apply at export, so posts match the site) */
  --duotone-shadow: #0B1F3A;        /* = primary navy */
  --duotone-mid: #607084;           /* rgb(96,112,132) */
  --duotone-highlight: #F4F5F7;     /* = surface-muted */
  --duotone-strength: 0.42;         /* duotone blended at 42% over the original */
  --duotone-source-saturation: 0.72;/* original desaturated to 72% before the blend; grayscale autocontrast cutoff 1% */
  --photo-overlay-navy: linear-gradient(180deg, rgba(11,31,58,0) 55%, rgba(11,31,58,.35)); /* hero photo foot only (website) */
  --photo-chip-bg: rgba(255,255,255,.94);  /* caption/credit chip on photos (navy text) */
  /* Motion (website) */
  --motion-ease: cubic-bezier(.2,.7,.2,1);

  /* ---------- Site aliases (exact names used in deploy-v10) ---------- */
  --navy: var(--color-primary);
  --navy-hover: var(--color-secondary);
  --navy-deep: var(--color-primary-deep);
  --teal: var(--color-accent);
  --teal-on-navy: var(--color-accent-on-dark);
  --white: var(--color-surface);
  --pale: var(--color-surface-muted);
  --charcoal: var(--color-ink);
  --near-black: var(--color-ink-strong);
  --muted: var(--color-ink-soft);
  --border: var(--color-rule);
  --font-serif: var(--type-display-family);
  --font-sans: var(--type-sans-family);
  --radius: var(--radius-sm);
  --radius-card: var(--radius-md);
  --btn-h: var(--btn-height);
  --btn-px: var(--btn-padding-x);
  --text-display: clamp(2.25rem,1.4rem + 2.2vw,3.5rem); --text-display-lh: 1.14;
  --text-h1: clamp(1.85rem,1.2rem + 1.4vw,2.5rem);      --text-h1-lh: 1.2;
  --text-h2: clamp(1.5rem,1.15rem + 0.7vw,1.75rem);     --text-h2-lh: 1.286;
  --text-h3: clamp(1.2rem,1.05rem + 0.35vw,1.375rem);   --text-h3-lh: 1.273;
  --text-body: 16px;    --text-body-lh: 26px;
  --text-ui: 14px;      --text-ui-lh: 20px;
  --text-kicker: 12px;  --text-kicker-lh: 16px;
  --text-caption: 12px; --text-caption-lh: 18px;
}

/* Convenience classes (optional) */
.t-display-xl { font: var(--type-display-xl-weight) var(--type-display-xl-size)/var(--type-display-xl-leading) var(--type-display-xl-family); letter-spacing: var(--type-display-xl-tracking); color: var(--color-primary); }
.t-display-lg { font: var(--type-display-lg-weight) var(--type-display-lg-size)/var(--type-display-lg-leading) var(--type-display-lg-family); letter-spacing: var(--type-display-lg-tracking); color: var(--color-primary); }
.t-headline-md { font: var(--type-headline-md-weight) var(--type-headline-md-size)/var(--type-headline-md-leading) var(--type-headline-md-family); letter-spacing: var(--type-headline-md-tracking); color: var(--color-primary); }
.t-headline-sm { font: var(--type-headline-sm-weight) var(--type-headline-sm-size)/var(--type-headline-sm-leading) var(--type-headline-sm-family); letter-spacing: var(--type-headline-sm-tracking); color: var(--color-primary); }
.t-body { font: var(--type-body-md-weight) var(--type-body-md-size)/var(--type-body-md-leading) var(--type-body-md-family); color: var(--color-ink); }
.t-caption { font: var(--type-caption-weight) var(--type-caption-size)/var(--type-caption-leading) var(--type-caption-family); color: var(--color-ink-soft); }
.t-eyebrow { font: var(--type-label-caps-weight) var(--type-label-caps-size)/var(--type-label-caps-leading) var(--type-label-caps-family); letter-spacing: var(--type-label-caps-tracking); text-transform: uppercase; color: var(--color-accent); }