/* Cardinal Response design tokens — vendored copy.
   ────────────────────────────────────────────────────────────────────────
   Source: Cardinal Response Design System (Claude Design), tokens/colors.css,
   typography.css, spacing.css and fonts.css, as at 26 July 2026.

   Vendored rather than linked so the site is self-contained: the daily job
   builds and deploys unattended, and a build that reaches out to another
   service is a build that can fail at 05:15 UTC with nobody watching.

   Values are copied verbatim. If the design system changes, re-copy — do not
   edit these in place, or the two drift silently and neither is authoritative.
   Site-specific additions live in style.css, never here.
   ──────────────────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700;800&family=Public+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
  /* ---- Base palette ---- */
  --color-black: #141414;         /* Topmark Black */
  --color-gold: #E8A826;          /* Cardinal Gold */
  --color-gold-dark: #C98A12;
  --color-gold-light: #F5D999;
  --color-page: #FBFBFC;

  /* Neutral ramp, light → dark */
  --color-surface: #EFF0F1;
  --color-rule: #D8DADC;
  --color-mist: #A2A5A8;
  --color-slate: #6B6E72;
  --color-graphite: #3A3D40;
  --color-white: #FFFFFF;

  /* ---- Status ramp ----
     Deliberately desaturated. Reserved for severity signalling — never
     decoration. On this site that means the index level readout only. */
  --color-danger: #B3261E;
  --color-danger-bg: #FBE9E8;
  --color-danger-border: #E3B3AF;
  --color-warning: #C87A0A;
  --color-warning-bg: #FBF0DD;
  --color-warning-border: #E7C68B;
  --color-good: #1C7C54;
  --color-good-bg: #E7F3ED;
  --color-good-border: #A9CFBE;

  /* ---- Semantic aliases ---- */
  --surface-page: var(--color-page);
  --surface-card: var(--color-white);
  --surface-sunken: var(--color-surface);
  --surface-inverse: var(--color-black);

  --border-default: var(--color-rule);
  --border-strong: var(--color-mist);
  --border-focus: var(--color-black);

  --text-primary: var(--color-black);
  --text-secondary: var(--color-slate);
  --text-tertiary: var(--color-mist);
  --text-inverse: var(--color-page);
  --text-accent: #93690F;         /* gold text on light, AA-safe */
  --text-link: var(--color-black);
  --text-link-hover: var(--color-gold-dark);

  --accent: var(--color-gold);
  --accent-hover: var(--color-gold-dark);
  --accent-tint: var(--color-gold-light);

  /* ---- Data visualisation (Palette B) ----
     Gold marks the ONE hero series and is never decorative here. */
  --viz-hero: #E8A826;
  --viz-1: oklch(0.47 0.090 250);   /* sea blue */
  --viz-2: oklch(0.53 0.135 33);    /* terracotta */
  --viz-3: oklch(0.32 0 0);
  --viz-4: oklch(0.48 0 0);
  --viz-5: oklch(0.62 0 0);
  --viz-6: oklch(0.74 0 0);
  --viz-grid: #E6E7E9;
  --viz-axis: var(--color-black);
  --viz-label: var(--color-slate);

  /* ---- Depth & overlays ---- */
  --overlay-ink: rgba(20, 20, 20, 0.55);
  --overlay-ink-strong: rgba(20, 20, 20, 0.78);
  --glass-fill: rgba(20, 20, 20, 0.42);
  --glass-border: rgba(255, 255, 255, 0.16);

  /* ---- Type ---- */
  --font-display: 'Archivo', 'Arial Narrow', sans-serif;
  --font-body: 'Public Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

  --text-2xs: 11px;
  --text-xs: 12px;
  --text-sm: 13px;
  --text-base: 15px;
  --text-md: 17px;
  --text-lg: 20px;
  --text-xl: 24px;
  --text-2xl: 30px;
  --text-3xl: 38px;
  --text-4xl: 48px;
  --text-5xl: 64px;
  --text-6xl: 88px;
  --text-7xl: 120px;
  --text-8xl: 160px;

  --leading-tight: 1.1;
  --leading-snug: 1.3;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --tracking-tightest: -0.035em;
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-wider: 0.08em;
  --tracking-widest: 0.16em;

  /* ---- Spacing ---- */
  --space-1: 4px;   --space-2: 8px;    --space-3: 12px;  --space-4: 16px;
  --space-5: 20px;  --space-6: 24px;   --space-8: 32px;  --space-10: 40px;
  --space-12: 48px; --space-16: 64px;  --space-20: 80px; --space-24: 96px;
  --space-32: 128px; --space-40: 160px; --space-48: 192px;

  /* Squared by intent. Every step is a true 0 corner — the named steps exist
     so component code can express intent, and they must all stay 0. */
  --radius-none: 0;
  --radius-sm: 0;
  --radius-md: 0;
  --radius-lg: 0;
  --radius-xl: 0;
  --radius-pill: 999px; /* circular controls ONLY — dots, avatars */

  /* Cardinal corner-cut: one bottom-right chamfer at the logo triangle's
     angle. One cut per view, on one key surface. */
  --cut-sm-x: 7px;  --cut-sm-y: 11px;
  --cut-md-x: 11px; --cut-md-y: 17px;
  --cut-lg-x: 16px; --cut-lg-y: 24px;
  --cut-angle: 56.8deg;

  /* Two border weights, no others. */
  --border-hairline: 1px;
  --border-control: 1.5px;

  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;

  --shadow-sm: 0 1px 2px rgba(20, 20, 20, 0.05);
  --shadow-md: 0 8px 30px rgba(20, 20, 20, 0.09);
  --shadow-lg: 0 24px 60px rgba(20, 20, 20, 0.16);
  --shadow-xl: 0 40px 90px rgba(20, 20, 20, 0.22);

  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-emphasized: cubic-bezier(0.2, 0.8, 0.2, 1);
  --duration-fast: 120ms;
  --duration-base: 240ms;
  --duration-slow: 420ms;
  --duration-reveal: 720ms;

  --container-max: 1200px;
  --container-wide: 1440px;
}

/* Dark chart variant — same hues lifted for contrast on ink. The index gauge
   and history chart sit on a dark panel (a design-system "break" register),
   so they carry this. */
[data-viz-dark] {
  --viz-1: oklch(0.58 0.105 250);
  --viz-2: oklch(0.60 0.140 33);
  --viz-3: oklch(0.85 0 0);
  --viz-4: oklch(0.72 0 0);
  --viz-5: oklch(0.58 0 0);
  --viz-6: oklch(0.46 0 0);
  --viz-grid: rgba(255, 255, 255, 0.14);
  --viz-axis: rgba(255, 255, 255, 0.5);
  --viz-label: rgba(255, 255, 255, 0.55);
}