/* ==========================================================================
   NEXUS — Design tokens
   The single source of visual truth in code. Every value here comes from
   .design/DESIGN.md. Do not introduce a colour, size, radius, duration or
   easing anywhere else in the CSS — add it here first, or don't use it.
   ========================================================================== */

:root {
  /* --- Neutrals (DESIGN.md §2) ------------------------------------------ */
  --c-canvas:    #F7F7F6;  /* page ground */
  --c-surface:   #FFFFFF;  /* elevated areas, tables, forms */
  --c-mist:      #F0F1F1;  /* alternating bands, spec blocks */
  --c-hairline:  #E3E5E6;  /* every 1px border and divider */
  --c-aluminium: #8C959C;  /* muted meta, labels, disabled */
  --c-steel:     #55606A;  /* secondary text, captions */
  --c-graphite:  #1E262B;  /* secondary dark surface, footer dividers */
  --c-ink:       #0E1417;  /* primary text, dark bands, footer */

  /* --- NEXUS blues — the two logo colours only (DESIGN.md §2) ------------ */
  --c-blue:        #0089B9;  /* primary interactive + brand accent */
  --c-blue-bright: #00A4E7;  /* sparing: hover on dark, line-art, highlights */
  --c-blue-abyss:  #05384C;  /* optional dark band surface */
  --c-blue-wash:   #E8F3F8;  /* active row, selected chip */
  --c-error:       #B3261E;  /* form validation only */

  /* --- Type (DESIGN.md §3) ---------------------------------------------- */
  --font-sans: "Manrope", "Noto Sans TC", -apple-system, BlinkMacSystemFont,
               "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", "Noto Sans TC", ui-monospace, SFMono-Regular,
               "SF Mono", Menlo, Consolas, monospace;

  /* Type scale — anchors from DESIGN.md §4, interpolated between them.
     Desktop ≥1280 / tablet 768–1279 / mobile <768 */
  /* Hero only. The reference audit measured 160px/400 at KANEX and 130px/700
     at Dayos against 10–14px labels; NEXUS ran 76px against 17px — 4.5:1,
     which is why the page read as timid. This anchor gives ~136px against the
     12px mono label, an 11:1 jump, and it is carried at ExtraLight so the
     size reads as a drawn shape rather than a shout. */
  --fs-hero:       clamp(3rem,    0.85rem + 10.75vw, 8.5rem);  /* 48 → 136 */
  --fs-display-xl: clamp(2.5rem,  1.55rem + 4.75vw, 4.75rem);  /* 40 → 76 */
  --fs-display:    clamp(2.125rem, 1.45rem + 3.38vw, 3.75rem); /* 34 → 60 */
  --fs-h1:         clamp(1.875rem, 1.35rem + 2.63vw, 3rem);    /* 30 → 48 */
  --fs-h2:         clamp(1.5rem,   1.19rem + 1.56vw, 2.125rem);/* 24 → 34 */
  --fs-h3:         clamp(1.1875rem,1.03rem + 0.78vw, 1.5rem);  /* 19 → 24 */
  --fs-h4:         clamp(1.0625rem,1.02rem + 0.19vw, 1.125rem);/* 17 → 18 */
  --fs-lead:       clamp(1.125rem, 1.03rem + 0.47vw, 1.25rem); /* 18 → 20 */
  --fs-body:       clamp(1rem,     0.97rem + 0.16vw, 1.0625rem);/* 16 → 17 */
  --fs-body-sm:    clamp(0.875rem, 0.85rem + 0.16vw, 0.9375rem);/* 14 → 15 */
  --fs-caption:    clamp(0.8125rem,0.80rem + 0.09vw, 0.875rem); /* 13 → 14 */
  --fs-label:      clamp(0.6875rem,0.67rem + 0.09vw, 0.75rem);  /* 11 → 12 */
  --fs-data:       clamp(0.9375rem,0.92rem + 0.09vw, 1rem);     /* 15 → 16 */

  --lh-hero:       0.94;
  --lh-display-xl: 1.04;
  --lh-display:    1.06;
  --lh-h1:         1.12;
  --lh-h2:         1.20;
  --lh-h3:         1.30;
  --lh-h4:         1.40;
  --lh-lead:       1.60;
  --lh-body:       1.70;
  --lh-caption:    1.55;
  --lh-label:      1.40;

  --ls-hero:       -0.045em;
  --ls-display-xl: -0.03em;
  --ls-display:    -0.025em;
  --ls-h1:         -0.02em;
  --ls-h2:         -0.015em;
  --ls-h3:         -0.01em;
  --ls-label:      0.10em;
  --ls-spec-key:   0.06em;

  --fw-xlight:  200;   /* hero display only */
  --fw-light:   300;   /* large headings that need air */
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;

  /* --- Spacing — 8px base, DESIGN.md §7 --------------------------------- */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 24px;  --s-6: 32px;  --s-7: 40px;  --s-8: 56px;
  --s-9: 72px;  --s-10: 96px; --s-11: 128px; --s-12: 160px;

  /* Section padding, fluid between the mobile and desktop anchors */
  --section-major:    clamp(72px, 5.5vw + 40px, 128px);
  --section-standard: clamp(56px, 4vw + 32px, 96px);
  --section-tight:    clamp(40px, 2.5vw + 24px, 64px);
  --section-band:     clamp(80px, 7vw + 40px, 160px);

  /* --- Layout (DESIGN.md §5, §6, §8) ------------------------------------ */
  --w-text:    720px;
  --w-content: 1280px;
  --w-wide:    1440px;
  /* Gutters: 20 / 24 / 40 / 48 / 64 / 80 — see the breakpoint overrides below */
  --gutter: 20px;
  --grid-gap: 16px;
  --header-h: 60px;

  /* --- The dark ground (DESIGN.md §0.4, from ON.energy) ------------------
     Six roles and no more. The discipline is the point: the page is almost
     entirely one black, and separation comes from a change of SURFACE VALUE
     rather than from a border, so a single inverted band and a single accent
     band can carry all of the page's emphasis.

     Rolled out one page at a time — the homepage first. Until the other pages
     are converted these are read by site/styles/home.css only.
     ---------------------------------------------------------------------- */
  --c-ground:  #000000;  /* the page ground */
  --c-raised:  #171717;  /* cards and panels standing on the ground */
  --c-raised2: #212121;  /* the same panel, hovered */
  --c-invert:  #EEEEEE;  /* the one full-width light band — the page's peak */
  --c-line-dark: #3A3A3A;/* hairline on the dark ground, used sparingly */

  /* Metadata grey has to change with the ground under it. One grey cannot
     serve both: #AFAFAF is 9.4:1 on the ground and 3.1:1 on the light band. */
  --c-muted-on-ground: #AFAFAF;  /* 9.4:1 on #000, 7.3:1 on #171717 */
  --c-muted-on-invert: #5C5C5C;  /* 6.0:1 on #EEEEEE */

  /* The accent has to change with it too. #0089B9 is only 4.0:1 on #171717 and
     fails at label size, so small accent TEXT on the dark ground takes the
     bright blue instead — 5.9:1. Both are logo colours; neither is invented.
     #0089B9 keeps the large jobs: the CTA fill and the whole closing band. */
  --c-accent-on-dark: var(--c-blue-bright);

  /* Legacy plate tokens from candidate R4 (DESIGN.md §0.3). Still referenced
     by pages not yet converted; remove once the last one is. */
  --c-cream: #F6F4F2;  /* warm light plate — the paper of the monograph */
  --c-veil:  #E4E3E2;  /* raised panel on a light plate */
  --c-plate: #141414;  /* deepest dark plate */
  --c-press: #232323;  /* mid-dark plate */

  /* Metadata grey has to change with the plate under it. The source style uses
     one grey (#8C8C8C); it clears AA on the dark plates and fails on the light
     ones (3.07:1 on cream), so the light plates take a darker value. */
  --c-muted-on-light: #5C5C5C;  /* 4.9:1 on cream, 4.9:1 on veil */
  --c-muted-on-dark:  #8C8C8C;  /* 5.5:1 on the ink plate */

  /* The spec-label voice: uppercase, wide-tracked, the size of a stamped part
     number. One family carries every label, tag, index, badge and button.
     IBM Plex Mono, chosen 31 Aug 2026 over a condensed face after comparing
     both on the real homepage (DESIGN.md §0.3.3). It is already self-hosted,
     so the site still runs two families and no third face was added.
     Mono sets every character on the same advance, so long label strings wrap
     sooner than they would in a proportional face — keep them short.
     It stays a token: change this one line to switch the whole site. */
  --font-label: var(--font-mono);
  --fs-plate-label: 0.9375rem;  /* 15px */
  --ls-plate-label: 0.08em;

  /* The mono label on the dark ground is smaller and tighter than the plate
     label above. At 15px with 0.08em tracking a mono label wraps to two lines
     in a narrow card; at 12px with 0.02em it stays on one, which is what makes
     it read as an annotation rather than as a second heading. */
  --fs-eyebrow: 0.75rem;   /* 12px */
  --ls-eyebrow: 0.02em;

  /* Display type on the dark ground. ON.energy sets 64–96px at weight 300 with
     -0.04em tracking; the light weight at display size IS the signature, and
     bolding a heading destroys it. Manrope substitutes for Univers Next Pro. */
  --fs-statement: clamp(2.125rem, 1.05rem + 4.6vw, 4rem);   /* 34 → 64 */
  --fs-hero-dark: clamp(2.75rem, 1.10rem + 6.6vw, 6rem);    /* 44 → 96 */
  --ls-dark-display: -0.04em;
  --lh-dark-display: 1.06;

  /* Section rhythm on the dark ground: ON.energy runs 120px between sections
     and up to 200px around the loudest ones. */
  --section-dark: clamp(56px, 4.6vw, 80px);

  /* Shape on the dark ground (ON.energy: nav 6, cards 9, images 16,
     buttons 6, sections 24). The site's own --radius stays 0 elsewhere. */
  --radius-dark-card:    9px;
  --radius-dark-ui:      6px;
  --radius-dark-section: 24px;
  --ease-expo-out: cubic-bezier(0.16, 1, 0.30, 1);

  /* --- Shape (DESIGN.md §13) -------------------------------------------- */
  --radius:       0px;  /* layout, media, tables, panels */
  --radius-ui:    3px;  /* buttons, inputs, chips (2–4px band) */
  --radius-ui-sm: 2px;  /* checkboxes, small toggles */
  --hairline: 1px solid var(--c-hairline);
  --hairline-dark: 1px solid var(--c-graphite);

  /* --- Motion (DESIGN.md §17) — no duration exceeds 700ms ---------------- */
  --dur-micro:  150ms;
  --dur-base:   200ms;
  --dur-reveal: 400ms;
  --dur-media:  600ms;
  --ease-enter: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-state: cubic-bezier(0.40, 0, 0.20, 1);
}

/* Gutters and grid gaps step up with the viewport (DESIGN.md §6, §8) */
@media (min-width: 480px)  { :root { --gutter: 24px; } }
@media (min-width: 768px)  { :root { --gutter: 40px; --grid-gap: 24px; --header-h: 72px; } }
@media (min-width: 1024px) { :root { --gutter: 48px; } }
@media (min-width: 1280px) { :root { --gutter: 64px; --grid-gap: 32px; --header-h: 80px; } }
@media (min-width: 1440px) { :root { --gutter: 80px; } }

/* --- Fonts (DESIGN.md §3) ------------------------------------------------
   Self-hosted from site/fonts/. No Google Fonts, no CDN, no runtime request
   to a third party (CLAUDE.md §2). The WOFF2 files are installed as local
   project dependencies (@fontsource-variable/manrope, @fontsource/ibm-plex-mono,
   both OFL) and copied into site/fonts/ with their licences.
   Noto Sans TC is added when Traditional Chinese is introduced.
   ------------------------------------------------------------------------ */
@font-face {
  font-family: "Manrope";
  src: url("/fonts/manrope-variable-latin.woff2") format("woff2-variations");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC,
                 U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Manrope";
  src: url("/fonts/manrope-variable-latin-ext.woff2") format("woff2-variations");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/fonts/ibm-plex-mono-400-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/fonts/ibm-plex-mono-500-latin.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}