/* ============================================================================
 * Cadmos brand canon — design tokens
 *
 * Single source of truth for Cadmos's umbrella visual language.
 * Loaded by every Cadmos surface: cadmos.io, cadmos.finance, cadmos.pay.
 *
 * Companion files:
 *   fonts.css             — @font-face declarations + family variables
 *   accents-finance.css   — gold/brass family (cadmos.finance only)
 *   accents-pay.css       — teal family (cadmos.pay only; also generic
 *                           "positive/success" accent across the system)
 *
 * Brand structure
 *   Cadmos umbrella (this file): Navy ladder (navy-deep → navy → 600 → 400
 *                                → 100) + Wave-blue + Silver + neutral
 *                                scale + layout/radius/motion.
 *   Cadmos Finance accent:       Gold/brass (accents-finance.css).
 *   Cadmos Pay accent:           Teal (accents-pay.css).
 *
 * On-light vs on-dark rule (accents)
 *   Gold and teal each ship a brightness ladder: dk → core → hi.
 *     Light backgrounds → use the *-dk variant for body/text, base for fills.
 *     Dark backgrounds  → use the *-hi variant for both.
 *     Pale tint backgrounds (gold-100 / teal-100) → use *-ink for text.
 *   The convention shipped in cadmos.finance is a `.on-dark` modifier on
 *   chrome and a `.section-dark` ancestor selector that flip text colors
 *   automatically. Mirror this when porting to other sites.
 *
 * Typography roles (canonical)
 *   --font-display = Circular Std Book   — H1, section H2s, display chrome,
 *                                          brand-wordmark uses (≥ ~26px)
 *   --font-body    = Avenir Next LT Pro  — ledes, paragraphs, UI, h3/h4
 *   --font-mono    = JetBrains Mono      — eyebrows, labels, KPI numerals,
 *                                          timestamps, code
 *
 * Type scale (canonical)
 *   display-xl  clamp(72px, 10vw, 158px) / 1.0  / -0.025em / 400  Circular
 *   h1          clamp(48px, 6vw, 86px)   / 1.04 / -0.022em / 400  Circular
 *   h2          clamp(36px, 4.2vw, 56px) / 1.05 / -0.022em / 400  Circular
 *   h2-sm       clamp(26px, 2.8vw, 36px) / 1.15 / -0.018em / 400  Circular
 *   h3          22px                     / 1.2  / -0.01em  / 600  Avenir Demi
 *   lede        clamp(18px, 1.4vw, 21px) / 1.55 / 0        / 400  Avenir Regular
 *   body        16px                     / 1.6  / 0        / 400  Avenir Regular
 *   small       13px                     / 1.5  / 0        / 400  Avenir Regular
 *   mono-chrome 11px                     / 1.4  / 0.10em   / 500  JBM Medium uppercase
 *   mono-data   clamp(32px, 3.5vw, 48px) / 1.0  / -0.015em / 500  JBM Medium
 * ============================================================================ */

:root {
  /* ───── Brand-core — Cadmos umbrella ─────────────────────────────────── */
  --cadmos-navy:      #00146A;  /* Primary brand color, logo */
  --cadmos-navy-deep: #071A4D;  /* Dark surfaces, deep heroes */
  --cadmos-navy-600:  #0A2186;  /* Active/pressed navy */
  --cadmos-navy-400:  #4A5BA5;  /* Mid-tier — secondary chrome, hover */
  --cadmos-navy-100:  #E6E9F3;  /* Pale tint background */
  --cadmos-blue:      #6689FA;  /* Wave / bridge / link accent */
  --cadmos-silver:    #B9C3D6;  /* Cool secondary */

  /* ───── Neutrals ──────────────────────────────────────────────────────── */
  --ink:    #0A0E1A;
  --ink-2:  #475569;
  --ink-3:  #64748B;

  --hair:             #E5E9F2;                    /* solid, on white */
  --hair-translucent: rgba(10, 27, 61, 0.10);     /* over non-white surfaces */

  --surface:        #FFFFFF;
  --surface-cool:   #F7FAFD;
  --surface-cool-2: #EEF6FB;
  --surface-abyss:  #02071F;  /* layered deep-dark sections (rare) */

  /* ───── Layout ───────────────────────────────────────────────────────── */
  --container-max: 1280px;
  --gutter: clamp(20px, 4vw, 56px);
  --rail:   clamp(48px, 4vw, 64px);

  /* ───── Radius ───────────────────────────────────────────────────────── */
  --radius-sm:   8px;
  --radius-btn:  10px;
  --radius-card: 14px;
  --radius-lg:   20px;

  /* ───── Motion ───────────────────────────────────────────────────────── */
  --ease:       cubic-bezier(0.2, 0.6, 0.2, 1);
  --ease-glide: cubic-bezier(0.16, 1, 0.3, 1);   /* long-tail entrances */

  --dur-fast: 120ms;
  --dur-base: 240ms;
  --dur-slow: 480ms;
}