/* Type: Inter for latin/UI, Noto Sans SC for Chinese, JetBrains Mono for
   technical readouts. All three are open-licensed, which is why they replace
   Futura (no web licence). Matches the reference site's stack. */
@font-face {
  font-family: "Inter Local";
  src: url("../fonts/InterVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  /* Latin only: Chinese falls through to Noto Sans SC, which avoids Inter's
     fallback boxes and keeps the CJK metrics consistent. */
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, 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: "Noto Sans SC Local";
  src: url("../fonts/NotoSansSC-subset.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "JetBrains Mono Local";
  src: url("../fonts/JetBrainsMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "JetBrains Mono Local";
  src: url("../fonts/JetBrainsMono-Medium.woff2") format("woff2");
  font-weight: 500 700;
  font-style: normal;
  font-display: swap;
}

/* Palette derived by measuring the reference site (see _ref_measure.json), not
   by eye. Three findings drove it:
     1. It is near-achromatic: the only chromatic value in 300+ measured
        declarations is slate-900 text. There is no brand accent colour.
     2. Zero real box-shadows — all 106 measured elements are none/transparent.
        Elevation is expressed with 1px hairlines at ~7% black.
     3. Radii are large: 14/18/22/26px, and pills for controls.
   The chrome follows all three. Status colours in the CAD demos deliberately
   do NOT: pass/warn/danger there carry functional meaning, and flattening them
   to grey would destroy information the reference site never had to convey. */
:root {
  --c-white: #ffffff;
  --c-canvas: #fbfbfb;
  --c-soft: #f5f5f5;
  --c-soft-2: #f0f0f0;
  --c-ink: #18181b;
  --c-ink-2: #2e2e35;
  --c-muted: #52525c;
  --c-faint: #6b6b76;
  --c-border: #ededed;
  --c-border-strong: #dcdcdc;
  --c-black: #09090b;
  /* Slate-tinted near-black: the single chromatic value measured on the
     reference site (oklch(0.208 0.042 265.755)). It is the chrome accent. */
  --c-slate: #0f172b;
  --c-slate-2: #1e293b;
  --c-slate-soft: #f1f2f5;
  --c-blue: #2563eb;
  --c-blue-soft: #e8f3ff;
  --c-mint: #0f7050;
  --c-mint-soft: #e4f7ef;
  --c-amber: #8f5a06;
  --c-amber-soft: #fff5dc;
  --c-amber-bright: #f0b04f;
  --c-red: #ab3527;
  --c-red-soft: #ffe9e6;
  --c-red-bright: #ef8678;
  --c-footer: #1b1b1e;
  --c-footer-muted: #8f8f99;
  --c-footer-line: #35353a;
  /* Landing-page palette, sampled pixel-by-pixel from the reference site
     (encord.com, 1280px render). It is a LIGHT page: #fafafa canvas inside a
     1px #dfe5e9 frame, with near-black and dark-plum rounded cards inset on
     top of it. The one brand accent is lime, not a dark-page violet. */
  --c-page: #fafafa;
  --c-frame: #dfe5e9;
  /* Encord's pale secondary button carries a 1px dark-plum hairline so the two
     nav CTAs read as a matched pair of equal width; without it the pale pill
     melts into the white header and looks narrower than the filled one. */
  --c-ghost-border: rgba(44, 35, 48, 0.30);
  --c-band: #edf0f2;
  --c-band-2: #f0f0f0;
  --c-tint-lime: #e8efdb;
  --c-tint-mist: #f7f9fa;
  --c-night: #1b1916;
  --c-night-2: #211924;
  --c-plum: #2a1f2c;
  --c-night-text: #f4f4f2;
  --c-night-muted: #a9a5a0;
  --c-night-faint: #6f6a66;
  --c-night-line: rgba(255, 255, 255, 0.14);
  --c-night-shadow: rgba(20, 18, 16, 0.30);
  --c-shadow-soft: rgba(20, 18, 16, 0.06);
  --c-lime: #a6e40e;
  --c-lime-strong: #b6f01b;
  --c-lime-deep: #8fc70a;
  --c-lime-wash: #d9f57f;
  --c-lime-soft: rgba(166, 228, 14, 0.18);
  --c-orchid: #d2a1fd;
  --c-orchid-2: #b981f5;
  --c-ink-warm: #1b1916;
  --c-body-grey: #5a5a5a;
  --c-body-grey-2: #3f4740;
  --c-mute-2: #8a8a8a;
  /* Dropdown menu item typography, matched to the reference nav (title and
     description greys are distinct: #404040 over #545454). */
  --c-mega-title: #404040;
  --c-mega-desc: #545454;
  --c-logo-grey: #6f6f6f;
  --c-logo-grey-2: #7a7a7a;
  --c-cta-bottom: #eef7d6;
  --c-lime-veil: rgba(166, 228, 14, 0.10);
  --c-lime-veil-2: rgba(166, 228, 14, 0.14);
  /* Scrim over the landing hero's looping demo reel. Uniform by design: it was
     shaped once (a radial patch riding behind the copy, so the picture's edges
     could stay bright) and the shape was rejected — over a moving picture a
     graduated dark region reads as a smudge laid on the video, not as part of
     it. Uniform means one value for the whole frame, so the wash cannot be
     tuned per-region and the copy has to be made to survive a lighter one.
     Sized against the reel's own worst frames, not an average one: sampled
     continuously across the whole 20.5s loop, the brightest pixels behind the
     copy land at t=3.3s and t=7.2s. Carried by the copy's halo rather than by
     darkening the picture: at 0.70 the reel was too dark to watch, and the flat
     wash cannot go under about 0.70 on its own — at 0.60 the lead paragraph
     falls to 3.4:1, under the 4.5:1 body-text floor. The halo is what buys the
     difference, so if it is ever removed this value has to go back up. */
  --c-video-scrim: rgba(12, 11, 10, 0.48);
  /* Halo on the hero copy. Deliberately a per-glyph shadow and not a shaped
     background: it hugs the letterforms, so unlike a panel or a graduated patch
     it leaves no edge anywhere on the picture. Two stops — a wide soft one for
     the body of the halo, a tight one so the letterform keeps a definite edge
     against a bright frame rather than a blurry one. */
  --c-copy-halo: rgba(12, 11, 10, 0.92);
  --c-copy-halo-tight: rgba(12, 11, 10, 0.85);
  /* Hero secondary text. Must be light enough to stay legible on a highlight
     of the reel above rather than only on its dark average. */
  --c-night-lead: #cfccc7;
  --c-menu-shadow: rgba(27, 25, 22, 0.10);
  --c-white-14: rgba(255, 255, 255, 0.14);
  --c-white-20: rgba(255, 255, 255, 0.20);
  --accent-lime: var(--c-lime);
  --on-accent-lime: var(--c-ink-warm);
  --c-overlay: rgba(255, 255, 255, 0.88);
  --c-shadow: rgba(20, 20, 28, 0.08);
  --c-shadow-strong: rgba(20, 20, 28, 0.14);
  --c-grid: rgba(70, 70, 88, 0.11);
  --c-black-04: rgba(9, 9, 11, 0.04);
  --c-black-06: rgba(9, 9, 11, 0.06);
  --c-black-10: rgba(9, 9, 11, 0.10);
  --c-black-14: rgba(9, 9, 11, 0.14);
  --c-white-06: rgba(255, 255, 255, 0.06);
  --c-white-10: rgba(255, 255, 255, 0.10);
  --c-white-70: rgba(255, 255, 255, 0.70);

  --bg: var(--c-white);
  --bg-canvas: var(--c-canvas);
  --bg-raised: var(--c-white);
  --bg-soft: var(--c-soft);
  --fg: var(--c-ink);
  --fg-strong: var(--c-black);
  --fg-muted: var(--c-muted);
  --fg-faint: var(--c-faint);
  --hairline: var(--c-border);
  --hairline-strong: var(--c-border-strong);
  /* Chrome accent: achromatic, per the reference. Used for emphasis in copy,
     links, and primary buttons. --status-info stays blue because it labels
     data inside the demos, where colour is information rather than decoration. */
  --accent: var(--c-slate);
  --accent-strong: var(--c-black);
  --accent-soft: var(--c-slate-soft);
  /* Text painted on top of --accent. Named separately so flipping the accent
     light or dark cannot silently strand text at 1:1 contrast. */
  --on-accent: var(--c-white);
  --status-pass: var(--c-mint);
  --status-pass-bg: var(--c-mint-soft);
  --status-warn: var(--c-amber);
  --status-warn-bg: var(--c-amber-soft);
  --status-danger: var(--c-red);
  --status-danger-bg: var(--c-red-soft);
  --status-info: var(--c-blue);
  --status-info-bg: var(--c-blue-soft);
  --grid-line: var(--c-grid);
  --grid-size: 16px;
  /* Purely decorative wash behind hero visuals and above the contact band.
     These were mapped onto --status-pass by the tokenizer, which made
     ornament borrow a semantic status colour; they get their own token so the
     achromatic chrome does not leak green. */
  --decor-tint: var(--c-slate-soft);
  --decor-tint-strong: var(--c-border);
  /* The reference has zero real box-shadows across 106 measured elements;
     elevation is a 1px hairline. Keeping the token names means nothing else
     has to change, and restoring shadows is a two-line edit here. */
  --panel-shadow: none;
  --panel-shadow-strong: none;

  /* Pseudo-product surfaces (CAD viewports, window chrome, stat panels).
     The old design made these dark to contrast a pale page; the new one is
     white throughout, so they resolve to light values and the demos read as
     part of the page rather than as embedded screenshots. Flip these eight to
     dark values to restore the inverted-viewport look. */
  --ui-canvas-bg: var(--c-canvas);
  --ui-panel-bg: var(--c-white);
  --ui-chrome-bg: var(--c-soft);
  --ui-fg: var(--c-ink);
  --ui-fg-muted: var(--c-muted);
  --ui-fg-faint: var(--c-faint);
  --ui-line: var(--c-border);
  --ui-scrim: var(--c-overlay);

  --ink-950: var(--c-black);
  --ink-900: var(--c-ink);
  --ink-850: var(--c-ink-2);
  --ink-800: var(--c-ink-2);
  --ink-700: var(--c-muted);
  --paper: var(--c-white);
  --paper-cool: var(--c-soft);
  --surface: var(--c-white);
  --text: var(--fg);
  --text-soft: var(--fg-muted);
  --text-dark: var(--fg);
  --text-dark-soft: var(--fg-muted);
  --pass: var(--status-pass);
  --warning: var(--status-warn);
  --danger: var(--status-danger);
  --review: var(--status-info);
  --line: var(--hairline);
  --line-dark: var(--hairline);
  --shadow: var(--panel-shadow-strong);
  /* Container 1160px and header 72px already matched the reference exactly
     (measured: content width 1160, <main> starts at y=72), so they stand. */
  --container: 1160px;
  --container-wide: 1280px;
  --header-h: 72px;
  --header-h-mobile: 68px;
  --section-space: 80px;
  --section-space-mobile: 64px;
  /* Reference radii: cards 14px, raised panels 18px, controls 22-26px, and
     pills for nav items and tags. */
  --radius-sm: 14px;
  --radius: 18px;
  --radius-lg: 26px;
  --radius-pill: 999px;
  --ease: cubic-bezier(0.2, 0.75, 0.25, 1);
  /* Type scale measured off the reference, not chosen: every heading there is
     weight 600 (never 700), h1 is exactly 3.8rem/60.8px, h2 tops out at
     3.4rem/54.4px, and tracking is a uniform -0.025em. Ours ran 650-700 weight
     at -0.045em with an 86px h1, which is a different, heavier voice.
     Two deliberate deviations, both because our copy is Chinese:
       - h1 keeps line-height 1.15 rather than the reference's 1.0; CJK glyphs
         fill the em box, so 1.0 makes a two-line h1 collide.
       - the mobile h1 resolves around 46-51px rather than holding 60.8px. CJK
         copy still gets the reference's three-line impact without overflowing. */
  --step-h1: clamp(2.4rem, 5vw, 3.8rem);
  --step-h1-sm: clamp(2.7rem, 12vw, 3.2rem);
  --step-h2: clamp(1.6rem, 3vw, 2.75rem);
  --step-h3: clamp(1.35rem, 2vw, 1.8rem);
  --tracking-tight: -0.025em;
  --font-body: "Inter Local", "Noto Sans SC Local", "Microsoft YaHei UI", "Microsoft YaHei", sans-serif;
  /* Mono first for codes, IDs and readouts; Noto Sans SC still has to follow
     because 74 of these rules also carry Chinese labels, which JetBrains Mono
     cannot render. */
  --font-tech: "JetBrains Mono Local", "Noto Sans SC Local", ui-monospace, SFMono-Regular, Consolas, monospace;
}