/* Iris (鸢尾) — 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-28 — a
   CRMEB-style e-commerce admin redesign (the same body of work is published at
   https://www.zcool.com.cn/work/ZNzA5MDg4NjQ=.html, "B端项目 | CRMEB 新零售电商
   系统改版界面设计"; the host blocked re-reading, so that URL is provenance, not
   a measured source). Every colour below is SAMPLED FROM THE IMAGES — nothing
   was read from computed styles. Values the reference never paints (focus ring,
   disabled, error, empty state, dark theme) are this pack's decision and say so
   inline with @derived.

   Identity in one line: pale blue-violet field, white cards that float on a
   hairline, NAVY LOCATES / VIOLET ACTS, and headings set in italic. */

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

  --ink: #1b2130;         /* text — near-black navy, never pure black */
  --ink-2: #4a5468;       /* secondary prose */
  --muted: #656e80;       /* column heads, axis ticks, meta — 4.6:1 on --bg */
  --faint: #a8afbe;       /* placeholder, disabled, hairline ticks — non-text */

  --border: #e4e7ef;      /* the 1px that draws every card */
  --border-strong: #d3d8e4; /* the hover edge */
  --row-hover: #f7f8fc;
  --scrim: rgba(20, 24, 34, 0.45); /* modal backdrop */

  /* ── location vs action: the two fills this style is built on ───────────
     --loc is "where you are" (nav item, page tab, segment thumb): a deep
     midnight navy, the most ink the system is allowed to use in one shape.
     --accent is "what you do" (buttons, toggles, links). Swapping them is the
     single fastest way to stop being this style — see PACK.md § Bans. */
  --loc: #232a3d;
  --loc-hover: #2d3549;
  --on-loc: #ffffff;      /* 14.29:1 on --loc */

  /* @derived from `rgb(from var(--ink) r g b / …)` — see the @supports block
     at the end. Literals first so a pre-2024 browser keeps a correct colour. */
  --inset: rgba(27, 33, 48, 0.04); /* the quiet fill under a segmented control */

  /* ── the one action accent ──────────────────────────────────────────── */
  --accent: #6355e8;      /* 4.74:1 on --bg — safe as link and accent text */
  --accent-hover: #5748dc;
  --accent-ink: #ffffff;  /* 5.26:1 on --accent */
  --accent-weak: #eeecfd; /* selected row, tag wash, focus glow bed */
  --accent-line: #c3bcf5; /* the hairline around a weak surface */

  /* The ONLY gradient in the system, and it is spent on the sign-in button.
     @derived placement: the reference shows one violet gradient CTA on its
     auth screen and flat fills everywhere else; the pack keeps that budget. */
  --grad-cta: linear-gradient(180deg, #7a6bf0, #5f51e0);

  /* ── status ─────────────────────────────────────────────────────────────
     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: #14753f;     /* 5.20:1 on --bg — a delta written as text */
  --ok-weak: #e3f5eb;
  --danger: #e5484d;      /* 3.53:1 — marks, the destructive link's dot */
  --danger-text: #c2262e; /* 5.25:1 on --bg — the word "Delete", an error line */
  --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: #8a5a00;   /* 5.35:1 on --bg · 5.31:1 on --warn-weak */
  --warn-weak: #fdf1dd;
  --info: #4c6fff;        /* 3.77:1 — the "processing" dot and bar */
  --info-weak: #eaeefe;

  /* ── chart ramp — sampled from the reference's own dashboard mock ───── */
  --chart-1: #5b6cf0; /* the blue line */
  --chart-2: #f3c440; /* the amber line */
  --chart-3: #7c5cfc; /* the violet area + its gradient bed */
  --chart-4: #1a8f4f;
  --chart-5: #f0913c;
  --chart-grid: #eceef5;
  --chart-area: linear-gradient(180deg, rgba(124, 92, 252, 0.28), rgba(124, 92, 252, 0));

  /* ── radii — the ×1 ramp, and nesting subtracts ─────────────────────── */
  --r-inset: 8px;    /* inner blocks inside a card */
  --r-control: 10px; /* buttons, inputs, the active nav pill */
  --r-card: 16px;    /* every card */
  --r-panel: 20px;   /* 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(27, 33, 48, 0.04), 0 10px 30px rgba(27, 33, 48, 0.06);
  --shadow-2: 0 4px 12px rgba(27, 33, 48, 0.08), 0 24px 64px rgba(27, 33, 48, 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 Iris — that is the
     deliberate difference from the console packs. */
    /* 2026-09-29 账灵适配：这里去掉 Inter / Roboto —— Keystone 的 G1 直接禁用这两款
       （而且本机也装不到）。除此之外这一行是 design/iris/tokens.css 的原样。 */
    --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 — italic, see --font-title-style */
  --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: italic; /* @derived — the reference's signature voice;
                                 for CJK see PACK.md § Gotchas before using it */
  --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: 48px;     /* a table row — airy, and that is the register */
  --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, and the one place the pack overrules the reference: the
     screenshots show a violet focus glow on fields and nothing on controls.
     Every interactive element gets the same ring. */
  --focus-ring: 0 0 0 3px rgba(99, 85, 232, 0.30);
  --focus-line: var(--accent);
}

[data-theme="dark"] {
  --bg: #14171f;
  --panel: #1b1f2a;
  --panel-2: #222735;

  --ink: #eef1f6;
  --ink-2: #b6bdcc;
  --muted: #98a1b3; /* 7.0:1 on --bg */
  --faint: #6b7385;

  --border: #2a3040;
  --border-strong: #3a4254;
  --row-hover: #232937;
  --scrim: rgba(6, 8, 12, 0.62);

  /* @derived and deliberate: "location" means *maximum contrast with the
     field*, so in the dark twin the pill goes light and its text goes dark.
     It is not the navy hex re-used — that would be invisible. */
  --loc: #e9edf5;
  --loc-hover: #dfe4ee;
  --on-loc: #14171f;

  --inset: rgba(238, 241, 246, 0.05);

  --accent: #8b7bf4;      /* 5.32:1 on --bg */
  --accent-hover: #9a8cf6;
  --accent-ink: #14171f;  /* 5.32:1 on --accent — white here is 3.37:1, rejected */
  --accent-weak: #262146;
  --accent-line: #3c3570;

  --grad-cta: linear-gradient(180deg, #9a8cf6, #7b6aef);

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

  --chart-1: #7b8bf5;
  --chart-2: #f3c440;
  --chart-3: #9b8bf7;
  --chart-4: #3ecf7a;
  --chart-5: #f0913c;
  --chart-grid: #262c3a;
  --chart-area: linear-gradient(180deg, rgba(124, 92, 252, 0.35), rgba(124, 92, 252, 0));

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 30px rgba(0, 0, 0, 0.35);
  --shadow-2: 0 4px 12px rgba(0, 0, 0, 0.5), 0 24px 64px rgba(0, 0, 0, 0.6);

  --focus-ring: 0 0 0 3px rgba(139, 123, 244, 0.40);
}

/* 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.04);
  }
  [data-theme="dark"] {
    --inset: rgb(from var(--ink) r g b / 0.05);
  }
}

/* @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);
}