/* ============================================================================
   Polymorphic VDR — design tokens
   Quiet Computational Luxury. Every value here traces to the design spec;
   section references are cited so the system stays auditable.

   The discipline this file encodes: hierarchy comes from scale, spacing,
   position and contrast — never from perpetual bolding (§8), structure comes
   from hairline rules — never from shadows (§12/§13), and cyan is punctuation
   — never paint (§5).
   ========================================================================= */

:root {
  /* --- Foundation surfaces (§5) ------------------------------------------ */
  --obsidian:      #07111F;   /* primary dark environment; blue-black, never pure black */
  --deep-navy:     #0B1929;   /* secondary dark surface, panels within Obsidian */
  --porcelain:     #F6F5F1;   /* primary application canvas; replaces #FFFFFF */
  --pure-paper:    #FCFCFA;   /* documents, modals, table bodies, foreground sheets */

  /* --- Typographic colour (§5) ------------------------------------------- */
  --ink:           #101820;   /* primary type; avoid pure black */
  --graphite:      #3F4A54;   /* secondary text */
  --slate:         #77828C;   /* metadata, tertiary information */

  /* On dark environments */
  --ink-inverse:   #F2F6F6;   /* inherited from the logo wordmark (§3) */
  --graphite-dark: #9FADBA;
  --slate-dark:    #6B7A88;

  /* --- Brand accents (§5) ------------------------------------------------ */
  --cyan:          #24B9E6;   /* max ~3–5% screen occupancy. Punctuation, not paint. */
  --cyan-quiet:    rgba(36, 185, 230, 0.12);
  --gold:          #D8B343;   /* privileged status. Watch movement, not jewellery shop. */
  --gold-quiet:    rgba(216, 179, 67, 0.14);

  /* --- Semantic (§5) — all deliberately desaturated, no traffic lights --- */
  --success:       #26785F;
  --warning:       #A9782B;
  --critical:      #9B3A3A;
  --informational: var(--cyan);

  /* --- Borders: the principal structural device (§12) -------------------- */
  --rule:            rgba(16, 24, 32, 0.10);   /* light interface hairline */
  --rule-strong:     rgba(16, 24, 32, 0.18);   /* important separators */
  --rule-dark:       rgba(255, 255, 255, 0.12);/* dark interface hairline */
  --rule-dark-quiet: rgba(255, 255, 255, 0.07);

  /* --- Shadow: almost none (§13). No stacked shadows, no glow. ----------- */
  --shadow-lift: 0 12px 40px rgba(7, 17, 31, 0.07);

  /* --- Geometry (§11): straight edges, very modest radii ----------------- */
  --radius-control: 3px;
  --radius-input:   3px;
  --radius-panel:   4px;
  --radius-surface: 6px;   /* maximum, large presentation surfaces only */

  /* --- Typography (§6) --------------------------------------------------- */
  /* Interface face. Spec names Suisse International; Inter is the spec's own
     stated accessible fallback and is what ships (OFL, embedded offline). */
  --font-sans:  'Inter', 'Helvetica Neue', Arial, sans-serif;
  /* Editorial face, used sparingly. Spec names Tiempos; Source Serif 4 is the
     OFL stand-in occupying the same editorial role. */
  --font-serif: 'Source Serif 4', 'Tiempos', Georgia, serif;
  /* Logo lockup ONLY (§3) — never application typography. */
  --font-logo:  'Montserrat', var(--font-sans);

  /* Type scale (§7). Deal title is serif Regular and never bold. */
  --t-deal:       3.5rem;   /* 56px  — serif 400, -0.025em */
  --t-page:       2.25rem;  /* 36px  — sans 500, -0.025em */
  --t-section:    1.375rem; /* 22px  — sans 500 */
  --t-body:       0.9375rem;/* 15px  — sans 400 */
  --t-body-sm:    0.875rem; /* 14px */
  --t-table:      0.8125rem;/* 13px  — sans 400 */
  --t-meta:       0.75rem;  /* 12px  — sans 500, tracked */
  --t-meta-sm:    0.6875rem;/* 11px */
  --t-micro:      0.625rem; /* 10px  — sans 500, tracking .16em */
  --t-figure:     2.625rem; /* 42px  — major financial figure (§34) */

  /* Weights (§8): 400 / 500 / 600 only. 700 is deliberately absent. */
  --w-regular:  400;
  --w-medium:   500;
  --w-semibold: 600;

  /* Tracking */
  --track-tight: -0.025em;  /* deal + page titles */
  --track-meta:  0.10em;    /* metadata 0.08–0.12em */
  --track-micro: 0.16em;    /* micro labels */
  --track-logo:  0.15em;    /* wordmark */

  --lh-body:  1.55;
  --lh-tight: 1.2;

  /* --- Spatial system (§10): 4px base ------------------------------------ */
  --s1:  4px;
  --s2:  8px;
  --s3:  12px;
  --s4:  16px;
  --s6:  24px;
  --s8:  32px;
  --s12: 48px;
  --s16: 64px;
  --s24: 96px;   /* major section spacing lives at 64–96 */

  /* --- Layout (§9): 12-column editorial grid ----------------------------- */
  --canvas-max:  1600px;
  --content-max: 1440px;
  --gutter:      64px;   /* 48–72 */
  --col-gap:     24px;
  --nav-width:   272px;  /* 240–272 */

  /* --- Motion (§16): engineered, not entertaining ------------------------ */
  --ease:        cubic-bezier(.2, .8, .2, 1);
  --dur-hover:   140ms;  /* 120–160 */
  --dur-nav:     200ms;  /* 180–220 */
  --dur-page:    280ms;  /* 240–320 */
}

/* Motion is a courtesy, not a requirement (§16, §41). */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-hover: 1ms;
    --dur-nav:   1ms;
    --dur-page:  1ms;
  }
}