/* ==========================================================================
   tokens.css — The single source of truth for the Tembeka design language.
   Nothing elsewhere in the codebase should introduce a raw colour, a raw
   duration or an unexplained pixel value.
   ========================================================================== */

:root {
  /* ---------------------------------------------------------------------
     Palette — supplied brand identity.
     Navy carries authority. Gold is an accent of emphasis, never a surface.
     --------------------------------------------------------------------- */
  --navy-950: #061426;
  --navy-900: #071A33;
  --navy-800: #102B4E;
  --navy-700: #173B66;

  --gold-600: #9E7720;
  /* An accessible extension to the supplied palette. #9E7720 reaches only
     3.7:1 on ivory, which fails WCAG 2.2 AA for text; gold-700 is used
     wherever gold carries words, and gold-600 wherever it draws a line. */
  --gold-700: #86631A;
  --gold-500: #B8922E;
  --gold-400: #C8A75B;
  --champagne: #D7C28A;

  --ivory-100: #F5F2EA;
  --ivory-50:  #FAF8F3;
  --stone-200: #D9D9D4;
  --stone-500: #777873;

  --charcoal: #24282D;
  --white: #FFFFFF;

  /* ---------------------------------------------------------------------
     Semantic surfaces & ink.
     Light context is the default; .theme-dark flips the same names so a
     component never needs to know which background it is sitting on.
     --------------------------------------------------------------------- */
  --surface: var(--ivory-50);
  --surface-raised: var(--white);
  --surface-sunken: var(--ivory-100);
  --surface-inverse: var(--navy-900);

  --ink: var(--navy-950);
  --ink-strong: var(--navy-950);
  --ink-muted: #4C5560;      /* 7.0:1 on ivory-50 — AA for body text */
  --ink-subtle: #6B6C67;     /* 4.7:1 on ivory-100 */
  --ink-inverse: var(--ivory-50);

  --accent: var(--gold-700);        /* gold that carries text: 4.9:1 on ivory */
  --accent-rule: var(--gold-600);   /* gold that draws rules and brackets */
  --accent-on-dark: var(--gold-400);/* AA-compliant on navy surfaces  */
  --accent-quiet: #E6DCC2;

  --rule: rgb(36 40 45 / 0.14);       /* hairline on light */
  --rule-strong: rgb(36 40 45 / 0.28);
  --focus-ring: var(--gold-700);

  /* ---------------------------------------------------------------------
     Typography
     Display: a high-contrast serif for editorial authority.
     Interface: a neutral grotesque with tabular figures for financial data.
     --------------------------------------------------------------------- */
  --font-display: "Source Serif 4", "Iowan Old Style", "Charter",
                  "Palatino Linotype", Georgia, "Times New Roman", serif;
  --font-sans: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont,
               "Segoe UI", "Helvetica Neue", Arial, sans-serif;

  /* Fluid type scale. Each step is viewport-aware between 360px and 1600px. */
  --step--2: clamp(0.72rem, 0.70rem + 0.10vw, 0.78rem);
  --step--1: clamp(0.82rem, 0.79rem + 0.14vw, 0.90rem);
  --step-0:  clamp(1rem, 0.97rem + 0.16vw, 1.09rem);
  --step-1:  clamp(1.18rem, 1.11rem + 0.32vw, 1.38rem);
  --step-2:  clamp(1.42rem, 1.29rem + 0.58vw, 1.78rem);
  --step-3:  clamp(1.70rem, 1.48rem + 0.98vw, 2.30rem);
  --step-4:  clamp(1.95rem, 1.68rem + 1.20vw, 2.70rem);
  --step-5:  clamp(2.20rem, 1.82rem + 1.70vw, 3.25rem);
  --step-6:  clamp(2.50rem, 1.98rem + 2.30vw, 3.95rem);
  --step-7:  clamp(2.80rem, 2.10rem + 3.10vw, 4.75rem);

  --leading-tight: 1.02;
  --leading-display: 1.08;
  --leading-snug: 1.32;
  --leading-body: 1.68;

  --tracking-label: 0.16em;
  --tracking-wide: 0.05em;
  --tracking-display: -0.022em;

  /* Comfortable measures. Long-form prose never exceeds ~70 characters. */
  --weight-display: 500;
  --weight-display-strong: 600;

  --measure: 68ch;
  --measure-short: 46ch;
  --measure-statement: 22ch;

  /* ---------------------------------------------------------------------
     Spacing — a 4px-rooted scale, with fluid section rhythm.
     --------------------------------------------------------------------- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-s:   1rem;
  --space-m:   1.5rem;
  --space-l:   2rem;
  --space-xl:  3rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --space-4xl: 8rem;

  --section-space: clamp(4rem, 2.6rem + 6vw, 8.5rem);
  --section-space-tight: clamp(3rem, 2.2rem + 3.6vw, 5.5rem);

  /* ---------------------------------------------------------------------
     Layout
     --------------------------------------------------------------------- */
  --container: 78rem;        /* 1248px — the primary reading frame */
  --container-wide: 90rem;   /* 1440px — full-bleed compositions      */
  --container-narrow: 54rem; /* 864px  — editorial single column      */
  --gutter: clamp(1.25rem, 0.9rem + 1.8vw, 3rem);
  --grid-gap: clamp(1.5rem, 1rem + 2vw, 3.5rem);

  --header-height: 5.25rem;
  --header-height-compact: 4.25rem;

  /* ---------------------------------------------------------------------
     Shape — restrained. Near-square corners echo the logo's right angles.
     --------------------------------------------------------------------- */
  --radius-0: 0;
  --radius-1: 2px;
  --radius-2: 3px;
  --hairline: 1px;
  --rule-accent: 2px;

  /* The Tembeka Frame: stroke weight and reach of the corner bracket. */
  --frame-stroke: 2px;
  --frame-reach: clamp(2rem, 1.2rem + 3vw, 4.5rem);
  --frame-offset: clamp(0.75rem, 0.4rem + 1.4vw, 1.75rem);

  /* ---------------------------------------------------------------------
     Motion — one timing language across the whole site.
     --------------------------------------------------------------------- */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-editorial: cubic-bezier(0.16, 0.84, 0.44, 1);
  --duration-fast: 160ms;
  --duration-base: 280ms;
  --duration-slow: 620ms;
  --duration-reveal: 900ms;

  /* Elevation is used sparingly: this is a print-rooted design. */
  --shadow-subtle: 0 1px 2px rgb(6 20 38 / 0.05), 0 8px 24px rgb(6 20 38 / 0.06);
  --shadow-raised: 0 2px 4px rgb(6 20 38 / 0.06), 0 18px 48px rgb(6 20 38 / 0.12);
  --shadow-card: 0 1px 1px rgb(6 20 38 / 0.04), 0 12px 32px rgb(6 20 38 / 0.08);
  --shadow-card-hover: 0 2px 4px rgb(6 20 38 / 0.06), 0 24px 56px rgb(6 20 38 / 0.14);

  /* Fine photographic grain, applied at very low opacity over navy fields.
     It stops large dark areas from flattening into digital emptiness. */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");

  --z-header: 100;
  --z-menu: 200;
  --z-skip: 300;
}

/* --------------------------------------------------------------------------
   Dark (navy) context. Applied per-section, not per-site: the design
   deliberately alternates between ivory and navy registers.
   -------------------------------------------------------------------------- */
.theme-dark {
  --surface: var(--navy-900);
  --surface-raised: var(--navy-800);
  --surface-sunken: var(--navy-950);
  --surface-inverse: var(--ivory-50);

  --ink: var(--ivory-50);
  --ink-strong: var(--white);
  --ink-muted: #AFBACA;     /* 7.4:1 on navy-900 */
  --ink-subtle: #8494A8;    /* 4.8:1 on navy-900 */
  --ink-inverse: var(--navy-950);

  --accent: var(--gold-400);
  --accent-rule: var(--gold-400);
  --accent-quiet: rgb(200 167 91 / 0.28);

  --rule: rgb(245 242 234 / 0.16);
  --rule-strong: rgb(245 242 234 / 0.32);
  --focus-ring: var(--champagne);
}

.theme-deep { --surface: var(--navy-950); }
.theme-ivory { --surface: var(--ivory-100); }