/* Slate (石板) — token layer. Copy verbatim; components consume only var(--…).
   Theme switch: data-theme="dark" on :root. One switch, never two sources.

   Origin: reference screenshots supplied by the operator 2026-09-29 — eight
   product-UI shots (a mobile filter sheet, a nested sidebar menu, a schedule,
   an opportunities list, a file manager, a floating menu with ⌘ hints, and a
   dense cargo dashboard). The palette is SAMPLED FROM THOSE IMAGES: near-white
   field, white cards, hairline edges, and colour spent only in small marks
   (badges, bars, state dots). Values the references never paint (dark twin,
   focus ring, the *-text steps) are this pack's decision and say so inline.

   Identity in one line: white cards on a cool near-white field, NEAR-BLACK for
   where-you-are and what-you-do, big radii, and colour kept small. */

:root {
  /* ── field and surfaces ─────────────────────────────────────────────── */
  --bg: #f6f7f9;          /* the near-white field the whole product sits on */
  --panel: #ffffff;       /* the card, the table plane, the modal */
  --panel-2: #f3f4f6;     /* the quiet inset: tab track, chart well, code */

  --ink: #111214;         /* text — neutral near-black, never pure black */
  --ink-2: #4b4f57;       /* secondary prose */
  --muted: #5b5f68;       /* 列头、轴标、元信息（原来 #71757e 只到 APCA Lc 55；旧值 #5e626b 拿 --panel 调、在 --bg/--panel-2 上只有 58–59）*/
  --faint: #a9adb6;       /* placeholder, disabled, hairline ticks — non-text */

  --border: #ececef;      /* the hairline: cards barely draw an edge here */
  --border-strong: #dcdde2; /* the hover edge */
  --row-hover: #f7f8fa;
  --scrim: rgba(17, 18, 20, 0.42); /* modal backdrop */

  /* ── location vs action: both are near-black in this style ──────────────
     The references put the same black behind "where you are" (the active nav
     pill, the selected page tab) and "what you do" (More Filters, New draft,
     the All tab). What separates them is the surface they sit on, not a second
     hue — see PACKS.md § 规矩: do not add a colour to tell them apart. */
  --loc: #111214;
  --loc-hover: #1d1f23;
  --on-loc: #ffffff;      /* 18.4:1 on --loc */

  --inset: rgba(17, 18, 20, 0.045); /* the quiet fill under a segmented control */

  /* ── the one action colour, and it is not a hue ──────────────────────── */
  /* 数据与链接的蓝。旧值 #4250d8 是在 --panel 上量的（Lc 61），但正文实际落在
     --bg / --panel-2 / --accent-weak 上，只有 55–58 —— 那是拿错背景调出来的。
     动作不靠它：动作 = --ink（见 slate.app.css）。 */
  --accent: #3b48c2;
  --accent-hover: #333fc0;
  --accent-ink: #ffffff;
  --accent-weak: #eceeff; /* selected row, tag wash */
  --accent-line: #d8ddff; /* the hairline around a weak surface */

  /* The references show flat black CTAs; the gradient only keeps the slot warm
     so the sign-in button still reads as the loudest thing on its page. */
  --grad-cta: linear-gradient(180deg, #26282c, #0f1012);

  /* ── status — this is where the colour lives ───────────────────────────
     Status is never carried by colour alone: a delta ships its arrow and its
     sign, a state ships its word. The *-text steps exist because the mark
     colours do not clear 4.5:1 as text on the light field. */
  --ok: #1a8f4f;          /* 3.73:1 — marks, bars, donut */
  --ok-text: #126c3a;     /* 写在 --ok-weak 上的字：Lc 60（旧值 #14753f 只有 57）*/
  --ok-weak: #e3f5eb;
  --danger: #e5484d;      /* 3.53:1 — marks, the destructive link's dot */
  --danger-text: #a52027; /* 写在 --danger-weak 上的字：Lc 60（旧值 #c2262e 只有 53）*/
  --danger-weak: #fdebed;
  /* @derived honesty: amber at this step is 2.55:1 on the field, UNDER the 3:1
     non-text floor — so amber never ships as a lone dot or a bare bar. It is a
     --warn-weak surface plus --warn-text (5.35:1) with its word. */
  --warn: #d9870f;
  --warn-text: #7f5300;   /* 写在 --warn-weak 上的字：Lc 60（旧值 #8a5a00 只有 56）*/
  --warn-weak: #fdf1dd;
  --info: #4c6fff;        /* 3.77:1 — the "processing" dot and bar */
  --info-weak: #eaeefe;

  /* ── chart ramp — the references' dashboards run blue + amber + green ── */
  --chart-1: #5b6cf0; /* the blue line */
  --chart-2: #f3c440; /* the amber line */
  --chart-3: #4c6fff; /* the area fill and its gradient bed */
  --chart-4: #1a8f4f;
  --chart-5: #f0913c;
  --chart-grid: #eef0f3;
  --chart-area: linear-gradient(180deg, rgba(76, 111, 255, 0.24), rgba(76, 111, 255, 0));

  /* ── radii — rounder than Iris on purpose: the references are round ──── */
  --r-inset: 10px;   /* inner blocks inside a card */
  --r-control: 12px; /* buttons, inputs, the active nav pill */
  --r-card: 18px;    /* every card */
  --r-panel: 24px;   /* modal, drawer, the auth card */
  --r-pill: 999px;   /* tabs, chips, tags, toggles, avatars */

  /* ── elevation — a hairline plus a very soft ambient float ──────────── */
  --shadow-1: 0 1px 2px rgba(17, 18, 20, 0.04), 0 8px 24px rgba(17, 18, 20, 0.06);
  --shadow-2: 0 6px 16px rgba(17, 18, 20, 0.08), 0 28px 72px rgba(17, 18, 20, 0.18);

  /* ── type ───────────────────────────────────────────────────────────────
     Two roles, one face: every number in this product is the UI face with
     tabular numerals. There is no monospace anywhere in Slate. */
  --font-ui: "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei",
    system-ui, -apple-system, "Segoe UI", sans-serif;

  --t-display: 40px; /* the auth headline, and only that */
  --t-title: 26px;   /* page titles */
  --t-metric: 30px;  /* the number in a stat tile */
  --t-card: 16px;    /* card and modal titles */
  --t-prose: 15px;   /* running text */
  --t-body: 14px;    /* dense UI, table cells, fields */
  --t-meta: 12px;    /* labels, column heads, foot notes */
  --t-chip: 11px;    /* pills, chips, badges */

  --font-title-style: normal; /* the references set headings upright — no italic */
  --track-title: -0.02em;
  --track-metric: -0.01em;

  --w-regular: 400;
  --w-medium: 500;
  --w-semibold: 600;
  --w-bold: 700; /* metrics only */

  /* ── grid and fixed heights ─────────────────────────────────────────── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;

  --h-row: 44px;     /* a table row */
  --h-control: 36px; /* button, tab, nav item */
  --h-field: 42px;   /* input, select */
  --w-rail: 232px;   /* the sidebar */
  --w-rail-collapsed: 64px;

  /* ── motion — one curve, states only ────────────────────────────────── */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-hover: 120ms; /* background, border, colour */
  --dur-state: 180ms; /* a pill switching, a toggle throwing */
  --dur-enter: 280ms; /* modal, drawer, toast — the only entrances here */
  --press-scale: 0.98;

  /* @derived — the references never show a focus ring; this is the pack's
     decision, and it is neutral on purpose (a hue here would out-shout the
     near-black action). */
  --focus-ring: 0 0 0 3px rgba(17, 18, 20, 0.22);
  --focus-line: var(--accent);
}

[data-theme="dark"] {
  --bg: #121317;
  --panel: #1a1b1f;
  --panel-2: #232428;

  --ink: #f2f3f5;
  --ink-2: #b8bbc1;
  --muted: #b2b5bb; /* 同样按 APCA 挑：7.0:1（WCAG）不等于过 APCA。旧值 #a8abb2 在 --panel/--panel-2 上只有 59/56，现在三面都是 60+ */
  --faint: #6d7076;

  --border: #2a2b30;
  --border-strong: #3a3c42;
  --row-hover: #232428;
  --scrim: rgba(6, 7, 9, 0.62);

  /* @derived and deliberate: "location" means *maximum contrast with the
     field*, so in the dark twin the chip goes light and its text goes dark. */
  --loc: #f2f3f5;
  --loc-hover: #e6e7ea;
  --on-loc: #121317;

  --inset: rgba(242, 243, 245, 0.06);

  --accent: #adb8ff;      /* 数据与链接的蓝（深色下往亮的方向走；旧值 #8f9dff 在 --panel-2 上只有 54）*/
  --accent-hover: #a5b0ff;
  --accent-ink: #121317;
  --accent-weak: #262a45;
  --accent-line: #3a3f63;

  --grad-cta: linear-gradient(180deg, #3a3c42, #2a2b30);

  --ok: #3ecf7a;
  --ok-text: #4fdb88;
  --ok-weak: #14301f;
  --danger: #f0656a;
  --danger-text: #f6969a;
  --danger-weak: #331b1e;
  --warn: #e8b04a;
  --warn-text: #f0c164;
  --warn-weak: #322611;
  --info: #6f8cff;
  --info-weak: #1d2444;

  --chart-1: #7b8bf5;
  --chart-2: #f3c440;
  --chart-3: #7b93f7;
  --chart-4: #3ecf7a;
  --chart-5: #f0913c;
  --chart-grid: #2a2b30;
  --chart-area: linear-gradient(180deg, rgba(76, 111, 255, 0.32), rgba(76, 111, 255, 0));

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.45), 0 8px 24px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 6px 16px rgba(0, 0, 0, 0.5), 0 28px 72px rgba(0, 0, 0, 0.6);

  --focus-ring: 0 0 0 3px rgba(242, 243, 245, 0.28);
}

/* Motion is a state change here, never an entrance for its own sake. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-hover: 0s;
    --dur-state: 0s;
    --dur-enter: 0s;
    --press-scale: 1;
  }
}

/* Relative colour is Baseline 2024. The literal ships first; this block only
   upgrades it to track --ink when a theme moves it. */
@supports (color: rgb(from red r g b)) {
  :root {
    --inset: rgb(from var(--ink) r g b / 0.045);
  }
  [data-theme="dark"] {
    --inset: rgb(from var(--ink) r g b / 0.06);
  }
}

/* @adapter — the semantic token contract. Pack comparison mounts packs through
   these roles; components keep consuming the pack's own tokens. */
:root {
  --sem-surface: var(--bg);
  --sem-surface-raised: var(--panel);
  --sem-text: var(--ink);
  --sem-text-muted: var(--ink-2);
  --sem-line: var(--border);
  --sem-primary: var(--accent);
  --sem-on-primary: var(--accent-ink);
  --sem-positive: var(--ok);
  --sem-caution: var(--warn);
  --sem-negative: var(--danger);
}