/* ==========================================================================
   Oliver Camponovo — design tokens

   Every value the site is allowed to use lives here. The rule is simple: a
   component may compose tokens, it may not invent a number. Before this file
   existed the page carried 19 font sizes, 22 letter-spacings, 8 shadows and
   5 card paddings, none of them related to one another — which is what made
   it read as a competent template rather than as a designed object.
   ========================================================================== */

:root {

  /* -- Ink ---------------------------------------------------------------
     A warm near-black, not a neutral grey. #1a1a1a is the colour of UI
     chrome; ink on paper has a brown cast. The ramp exists so that the four
     dark sections of the page are not four identical slabs: each step is
     small enough to read as one continuous field and large enough to stop
     the page looking flat where two dark sections meet. */

  --ink-900: #0d0c0a;   /* deepest — the close of the page */
  --ink-800: #131210;   /* hero */
  --ink-700: #191714;   /* standard dark section */
  --ink-600: #1f1c18;   /* lifted dark section */
  --ink-500: #2a2620;   /* raised surfaces on dark */
  --ink: var(--ink-700);
  --ink-deep: var(--ink-900);

  /* -- Paper -------------------------------------------------------------
     Same idea in the other direction. Cards on paper lift *towards white*
     rather than being outlined, which is how printed matter behaves. */

  --paper-000: #fdfcfa;   /* raised surface */
  --paper-100: #f6f3ee;   /* standard paper */
  --paper-200: #efebe3;   /* recessed panel */
  --paper: var(--paper-100);

  /* -- Gold --------------------------------------------------------------
     --gold is the brand colour: fills, rules, decoration, and text on dark
     surfaces (7.1:1 on ink). As text on paper it reaches only 2.2:1, so
     --gold-ink is the AA-compliant equivalent (5.0:1) used for copy.
     --gold-text resolves to whichever is correct for the current surface. */

  --gold: #c5a059;
  --gold-bright: #d8bd85;   /* hairlines and accents on dark only */
  --gold-ink: #836230;      /* AA text on paper */
  --gold-dim: #9d8149;
  --gold-text: var(--gold-ink);

  --alliance: #ec4899;
  --alliance-ink: #b02566;
  --alliance-text: var(--alliance-ink);

  --danger: #ef4444;
  --safe: #22c55e;

  /* -- Hairlines ---------------------------------------------------------
     Tokenised so a section can flip the whole set by redeclaring three
     variables, instead of every rule hard-coding an rgba() that happens to
     suit one background. This is what made the old sheet unmaintainable:
     rgba(245,242,237,.1) appeared 24 times and rgba(26,26,26,.05) 19 times,
     and a component could not be moved between surfaces. */

  --line:      rgba(19, 18, 16, 0.12);
  --line-soft: rgba(19, 18, 16, 0.07);
  --line-gold: rgba(197, 160, 89, 0.28);
  --surface:   var(--paper-000);
  --surface-2: var(--paper-200);
  --on-surface:        rgba(19, 18, 16, 0.98);
  --on-surface-muted:  rgba(19, 18, 16, 0.72);
  /* 0.62, not 0.58: at 0.58 this token measured 4.43:1 on --paper-100, which
     is under AA by a margin too small to see and too real to keep. Every
     faint label on a light surface resolves through here, so the floor is
     set once. 0.62 gives 5.06:1 on --paper-100 and 4.93:1 on --paper-200. */
  --on-surface-faint:  rgba(19, 18, 16, 0.62);

  /* --gold-ink gives 5.09:1 on --paper-100, so the ring clears the 3:1 that
     SC 1.4.11 asks of a focus indicator. The bright gold would not: 2.2:1. */
  --focus-ring: var(--gold-ink);
  --focus-halo: rgba(253, 252, 250, 0.9);

  /* -- Type --------------------------------------------------------------
     Cormorant Garamond carries the voice; Inter carries the information;
     the mono face is reserved for things that are literally data — a docket
     number, a date, a step counter, a coordinate. Before, all three were
     used interchangeably for the same job, so none of them meant anything. */

  --serif: "Cormorant Garamond", "Songti SC", "Source Han Serif SC", "Noto Serif CJK SC", Georgia, serif;
  --sans: "Inter", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", ui-sans-serif, system-ui, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  /* A fluid scale on a ~1.25 ratio. Nothing outside it, and nothing below
     --t-micro: 12px is the floor. The page previously set its primary
     navigation at 9px and eleven other things at 8px, which is the single
     clearest tell of a template — genuinely expensive typography is never
     that small, because small type is what you resort to when the hierarchy
     is not doing the work. */

  --t-display: clamp(3rem, 7.2vw, 6.5rem);
  --t-h1:      clamp(2.5rem, 5.2vw, 4.25rem);
  --t-h2:      clamp(2rem, 3.6vw, 3rem);
  --t-h3:      clamp(1.375rem, 1.7vw, 1.625rem);
  --t-h4:      1.125rem;
  --t-lead:    clamp(1.125rem, 1.4vw, 1.3125rem);
  --t-body:    1.0625rem;
  --t-small:   0.9375rem;
  --t-micro:   0.75rem;

  --lh-display: 1.02;
  --lh-title:   1.1;
  --lh-lead:    1.55;
  --lh-body:    1.7;
  --lh-tight:   1.35;

  /* Four tracking values, not twenty-two. */
  --track-label: 0.18em;   /* eyebrows, labels, meta */
  --track-nav:   0.14em;
  --track-snug:  -0.01em;
  --track-tight: -0.025em; /* display sizes only */

  --measure: 68ch;         /* the readable maximum */
  --measure-narrow: 54ch;

  /* -- Space -------------------------------------------------------------
     A 4px-based scale. The section rhythm has three densities so that the
     page has a pulse: eleven sections at an identical 128px is not rhythm,
     it is a metronome. */

  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 24px;  --s-6: 32px;  --s-7: 48px;  --s-8: 64px;
  --s-9: 96px;  --s-10: 128px; --s-11: 160px;

  --section:       clamp(88px, 10vw, 152px);
  --section-tight: clamp(64px, 7vw, 104px);
  --section-loose: clamp(120px, 15vw, 232px);

  --pad-card:  clamp(28px, 3vw, 44px);
  --pad-panel: clamp(32px, 3.6vw, 56px);

  /* -- Grid --------------------------------------------------------------
     One shell, one gutter, one left edge for the whole document. The old
     sheet had three (0/24px, 77px and 184px at a 1280px viewport) because
     two sections used a narrower max-width and centred it, so the eye met a
     new margin twice on the way down the page. */

  --shell: 1200px;
  --shell-narrow: 880px;
  --gutter: clamp(24px, 5vw, 80px);
  --nav-h: 72px;
  --nav-h-condensed: 60px;

  /* -- Corners -----------------------------------------------------------
     Zero. The old 2px is the most indecisive value in interface design —
     too small to read as rounded, too large to read as sharp, and it costs
     the geometry its precision. Circles stay circles. */

  --r-none: 0px;
  --r-full: 999px;

  /* -- Elevation ---------------------------------------------------------
     Three shadows, each two-layer: a tight contact shadow that anchors the
     object plus a wide ambient one that gives it air. A single-layer shadow
     is what makes a card look like a div. Dark surfaces need their own set,
     because a 6%-black shadow is invisible on #191714. */

  --shadow-sm: 0 1px 2px rgba(19, 18, 16, 0.05), 0 2px 10px -2px rgba(19, 18, 16, 0.05);
  --shadow-md: 0 2px 4px rgba(19, 18, 16, 0.05), 0 14px 36px -12px rgba(19, 18, 16, 0.13);
  --shadow-lg: 0 4px 10px rgba(19, 18, 16, 0.07), 0 36px 70px -28px rgba(19, 18, 16, 0.26);

  /* -- Motion ------------------------------------------------------------
     One easing curve for everything that moves, three durations. The old
     sheet used 0.3/0.4/0.5/0.6/0.7/1/1.2s with three different curves, so
     two adjacent elements responded to the same gesture at different rates,
     which is felt even when it is not seen. */

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 0.18s;
  --dur: 0.32s;
  --dur-slow: 0.6s;
  --dur-image: 0.9s;

  /* Kept for compatibility with rules written against the old name. */
  --ease-out-expo: var(--ease);
}

/* -- Dark surfaces --------------------------------------------------------
   Any section that paints itself dark opts into the inverted token set once,
   here, and every component inside it follows without knowing where it is.
   That is the whole point of the hairline tokens above. */

.u-on-dark,
.nav, .mobilemenu, .hero, .credstrip, .archetypes, .expertise, .pedigree,
.contact, .designations, .totop {
  --gold-text: var(--gold);
  --alliance-text: var(--alliance);
  --line:      rgba(246, 243, 238, 0.12);
  --line-soft: rgba(246, 243, 238, 0.06);
  --line-gold: rgba(197, 160, 89, 0.32);
  --surface:   var(--ink-500);
  --surface-2: var(--ink-900);
  --on-surface:        #ffffff;
  --on-surface-muted:  rgba(246, 243, 238, 0.72);
  --on-surface-faint:  rgba(246, 243, 238, 0.56);
  --focus-ring: var(--gold);              /* 7.1:1 on ink */
  --focus-halo: rgba(13, 12, 10, 0.85);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 10px -2px rgba(0, 0, 0, 0.25);
  --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.35), 0 16px 40px -12px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 6px 14px rgba(0, 0, 0, 0.4), 0 40px 80px -30px rgba(0, 0, 0, 0.7);
}

/* -- Chinese --------------------------------------------------------------
   Letter-spacing is a Latin device. Applied to Han characters it inserts
   half an em between every glyph, which does not read as refinement — it
   reads as broken text, and it was doing so on 35 elements of this page,
   including every eyebrow at 0.5em. Han has no italic either, so browsers
   synthesise a slant that looks like a rendering fault.

   Enumerating the affected selectors was a losing game: the first pass
   listed thirty-one and still missed ten, and every new component would
   have added another. The rule is inverted instead — on a Chinese document
   nothing is tracked and nothing is slanted, and the handful of Latin
   fragments embedded in the copy give that up. That is the right trade in
   both directions: Chinese typography does not use italics for emphasis
   either, so the Latin loses a convention its surroundings never had.

   !important, deliberately. `*:lang(zh-Hans)` scores (0,1,0) — the same as
   `.eyebrow` and less than `.insights__aside p` — so without the flag the
   override loses on source order to the very rules it exists to override.
   This is the case !important is for: one writing system opting out of a
   device that does not apply to it, across every component at once.

   `*:lang(zh-Hans)`, not `:lang(zh-Hans) *`. The two differ on exactly the case
   that now exists: the Briefing carries English titles on the Chinese page,
   tagged lang="en". The descendant form matches every element inside a Chinese
   document regardless of its own language, and would strip the tracking from
   Latin text that wants it. The `:lang()` form matches an element by its own
   computed language, so an English subtree opts itself back out. */

*:lang(zh-Hans) {
  letter-spacing: 0.02em !important;
  font-style: normal !important;
}

/* Uppercasing is also a no-op on Han, so every label loses the one cue that
   made it read as a label. The weight carries it instead. */
:lang(zh-Hans) .eyebrow,
:lang(zh-Hans) .archetype__profile,
:lang(zh-Hans) .pedigree__blocktitle,
:lang(zh-Hans) .designations__title,
:lang(zh-Hans) .channels__label,
:lang(zh-Hans) .advisory__eyebrow,
:lang(zh-Hans) .quiz__audit,
:lang(zh-Hans) .enrol__eyebrow,
:lang(zh-Hans) .enrol__label,
:lang(zh-Hans) .mobilemenu__protocol,
:lang(zh-Hans) .hero__tagline,
:lang(zh-Hans) .credstrip__inner {
  font-weight: 500;
}