/* 乾启算力看板 · design tokens (DESIGN_SPEC §2.1). Hex values live ONLY in this file. */

@font-face {
  font-family: "Qianqi Archivo";
  src: url("/static/vendor/archivo/Archivo-Variable.woff2") format("woff2");
  font-weight: 100 900; font-stretch: 62% 125%; font-style: normal; font-display: swap;
  /* Latin + digits only. CJK punctuation (,。、:“”…—) deliberately falls through to the system CJK font. */
  unicode-range: U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC,
                 U+2009, U+2013, U+2122, U+2190-2199, U+2212, U+2215;
}

:root {
  color-scheme: light;
  /* surfaces — warm paper */
  --bg: #F4F3EF;  --bg-raised: #FBFAF8;  --bg-sunken: #EBE9E3;  --bg-deep: #E6E4DD;
  --scrim: rgba(15,15,14,.28);
  /* ink */
  --brand-ink: #050505;
  --text: #0F0F0E;  --text-2: #4F4D48;  --text-3: #6B6963;  --text-on-ink: #F4F3EF;
  /* lines */
  --line: rgba(15,15,14,.10);  --line-2: rgba(15,15,14,.06);  --line-strong: rgba(15,15,14,.22);
  --rule: #0F0F0E;  --track: rgba(15,15,14,.075);  --focus: #0F0F0E;
  --groove: rgba(15,15,14,.085);   /* the unlit groove of a small glyph arc (history rows) */
  /* state (semantic) */
  --free: #13784A;  --held: #985B06;  --fault: #BC351D;  --offline: #8A8780;   /* fault ≥ 4.5:1 on --bg-sunken too (hovered / selected cards) */
  --busy: var(--text);
  --free-soft:    color-mix(in oklab, var(--free) 10%, var(--bg));
  --held-soft:    color-mix(in oklab, var(--held) 10%, var(--bg));
  --fault-soft:   color-mix(in oklab, var(--fault) 9%, var(--bg));
  --offline-soft: color-mix(in oklab, var(--offline) 12%, var(--bg));
  --crit: var(--fault);  --warn: var(--held);  --ok: var(--free);
  /* charts */
  --series-1: var(--text);  --series-2: var(--text-2);  --series-3: var(--text-3);
  /* area fills for state bands (step charts, strips, time bars, matrix dots). Strokes, nodes and labels keep the full
     state colour; areas are toned so busy / held / free step down evenly in both themes. */
  --area-busy: color-mix(in oklab, var(--text) 84%, var(--bg));
  --area-busy-band: color-mix(in oklab, var(--text) 62%, var(--bg));   /* step-chart bands only: a wide busy area stays quieter than the hero */
  --area-held: color-mix(in oklab, var(--held) 24%, var(--bg));
  --area-free: color-mix(in oklab, var(--free) 13%, var(--bg));
  --area-fault: color-mix(in oklab, var(--fault) 26%, var(--bg));
  --area-1: color-mix(in oklab, var(--text) 7%, transparent);
  --grid: var(--line-2);  --axis: var(--text-3);  --crosshair: var(--line-strong);
  --hatch-color: var(--line-strong);
  --hatch: repeating-linear-gradient(45deg, transparent 0 5px, var(--hatch-color) 5px 6px); /* stripes run ↘ like the logo diagonal */
  /* elevation (overlays only) */
  --shadow-pop: 0 1px 0 rgba(15,15,14,.04), 0 18px 48px -12px rgba(15,15,14,.22);

  /* type */
  --font-sans: "Qianqi Archivo", "PingFang SC", "HarmonyOS Sans SC", "MiSans", "Microsoft YaHei UI",
               "Microsoft YaHei", "Noto Sans CJK SC", "Source Han Sans SC", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --fs-hero: 128px;  --fs-display: 72px;  --fs-num-l: 44px;  --fs-num-m: 28px;
  --fs-h1: 28px;  --fs-h2: 20px;  --fs-h3: 16px;
  --fs-body: 14px;  --fs-small: 13px;  --fs-caption: 12px;  --fs-micro: 11px; /* micro = Latin-only labels */
  --lh-tight: 1.1;  --lh-snug: 1.35;  --lh-body: 1.6;  --lh-prose: 1.75;
  --fw-light: 300;  --fw-regular: 400;  --fw-medium: 500;  --fw-semibold: 600;  --fw-bold: 700;
  --track-num: -0.03em;  --track-hero: -0.045em;  --track-eyebrow: 0.12em;  --track-brand-cn: 0.32em;  --track-brand-en: 0.34em;

  /* space (4px base) */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px;
  --gutter: 24px;  --page-pad: clamp(16px, 3.4vw, 40px);  --maxw: 1360px;  --section-gap: 72px;
  --header-h: 64px;  --filter-h: 52px;  --tabbar-h: 0px;

  /* radius — controls & overlays only */
  --r-xs: 4px;  --r-sm: 8px;  --r-md: 12px;  --r-lg: 16px;  --r-pill: 999px;

  /* motion */
  --dur-1: 120ms;  --dur-2: 240ms;  --dur-3: 600ms;  --dur-4: 1100ms;
  --ease-out: cubic-bezier(.2,.8,.2,1);  --ease-in-out: cubic-bezier(.65,0,.35,1);  --ease-pop: cubic-bezier(.34,1.4,.64,1);

  /* layers */
  --z-sticky: 30;  --z-header: 40;  --z-tabbar: 40;  --z-scrim: 70;  --z-drawer: 80;  --z-palette: 90;  --z-tip: 100;
}

/* dark — deep space. The same block appears twice (system preference unless forced light, and forced dark). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #09090A;  --bg-raised: #121214;  --bg-sunken: #1A1A1D;  --bg-deep: #050506;  --scrim: rgba(0,0,0,.55);
    --brand-ink: #EDEBE6;
    --text: #EDEBE6;  --text-2: #A9A69F;  --text-3: #85827B;  --text-on-ink: #09090A;
    --line: rgba(237,235,230,.11);  --line-2: rgba(237,235,230,.06);  --line-strong: rgba(237,235,230,.24);
    --rule: #EDEBE6;  --track: rgba(237,235,230,.085);  --focus: #EDEBE6;  --groove: rgba(237,235,230,.15);
    --free: #3DBE84;  --held: #E2A042;  --fault: #F2674F;  --offline: #77756F;
    --free-soft:    color-mix(in oklab, var(--free) 14%, var(--bg));
    --held-soft:    color-mix(in oklab, var(--held) 14%, var(--bg));
    --fault-soft:   color-mix(in oklab, var(--fault) 14%, var(--bg));
    --offline-soft: color-mix(in oklab, var(--offline) 16%, var(--bg));
    --area-1: color-mix(in oklab, var(--text) 9%, transparent);
    --area-busy: color-mix(in oklab, var(--text) 80%, var(--bg));   /* busy reads as ink (near-white) in dark, as in every glyph */
    --area-busy-band: color-mix(in oklab, var(--text) 52%, var(--bg));   /* a wide band is never the brightest surface */
    --area-held: color-mix(in oklab, var(--held) 54%, var(--bg));   /* ochre, not brown, next to the light busy band */
    --area-free: color-mix(in oklab, var(--free) 24%, var(--bg));
    --area-fault: color-mix(in oklab, var(--fault) 36%, var(--bg));
    --shadow-pop: 0 0 0 1px rgba(237,235,230,.08), 0 24px 64px -16px rgba(0,0,0,.7);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #09090A;  --bg-raised: #121214;  --bg-sunken: #1A1A1D;  --bg-deep: #050506;  --scrim: rgba(0,0,0,.55);
  --brand-ink: #EDEBE6;
  --text: #EDEBE6;  --text-2: #A9A69F;  --text-3: #85827B;  --text-on-ink: #09090A;
  --line: rgba(237,235,230,.11);  --line-2: rgba(237,235,230,.06);  --line-strong: rgba(237,235,230,.24);
  --rule: #EDEBE6;  --track: rgba(237,235,230,.085);  --focus: #EDEBE6;  --groove: rgba(237,235,230,.15);
  --free: #3DBE84;  --held: #E2A042;  --fault: #F2674F;  --offline: #77756F;
  --free-soft:    color-mix(in oklab, var(--free) 14%, var(--bg));
  --held-soft:    color-mix(in oklab, var(--held) 14%, var(--bg));
  --fault-soft:   color-mix(in oklab, var(--fault) 14%, var(--bg));
  --offline-soft: color-mix(in oklab, var(--offline) 16%, var(--bg));
  --area-1: color-mix(in oklab, var(--text) 9%, transparent);
  --area-busy: color-mix(in oklab, var(--text) 80%, var(--bg));   /* busy reads as ink (near-white) in dark, as in every glyph */
  --area-busy-band: color-mix(in oklab, var(--text) 52%, var(--bg));   /* a wide band is never the brightest surface */
  --area-held: color-mix(in oklab, var(--held) 54%, var(--bg));   /* ochre, not brown, next to the light busy band */
  --area-free: color-mix(in oklab, var(--free) 24%, var(--bg));
  --area-fault: color-mix(in oklab, var(--fault) 36%, var(--bg));
  --shadow-pop: 0 0 0 1px rgba(237,235,230,.08), 0 24px 64px -16px rgba(0,0,0,.7);
}

@media (max-width: 639px) {
  :root { --fs-hero: 96px; --fs-display: 48px; --fs-num-l: 32px; --fs-h1: 24px; --gutter: 16px; --section-gap: 48px;
          --header-h: 56px; --filter-h: 48px; --tabbar-h: 56px; }
}
@media (prefers-reduced-motion: reduce) {
  :root { --dur-1: 0ms; --dur-2: 0ms; --dur-3: 0ms; --dur-4: 0ms; }
}