/* Hallmark · design tokens · Tiến Lệ Admin
 * genre: modern-minimal · tone: utilitarian · theme: Evergreen (custom, shared with the storefront)
 * axes: light paper / single-family sans / chromatic-green · anchor hue: 150–165
 * Every colour, font, space and motion value used by admin.css is named here.
 * Contrast (WCAG): ink/paper-2 12.9 · ink-2/paper-2 6.6 · ink-3/paper-2 4.9 ·
 *   on-accent/accent 5.6 · rail-ink/rail 11.8 · rail-ink-2/rail 6.8 · field border 3.3
 */
:root {
  /* ---- Surfaces ---- */
  --color-paper:        oklch(96.2% 0.008 150);  /* app canvas */
  --color-paper-2:      oklch(99.2% 0.003 150);  /* raised: cards, topbar, inputs */
  --color-paper-3:      oklch(94.0% 0.011 150);  /* quiet fill: table head, hover, chips */
  --color-rule:         oklch(90.5% 0.012 150);  /* hairlines, card borders */
  --color-rule-strong:  oklch(84.0% 0.020 155);
  --color-field-border: oklch(64.0% 0.020 160);  /* input boundary, >= 3:1 on paper-2 */

  /* ---- Ink ---- */
  --color-ink:          oklch(30.5% 0.045 165);  /* forest ink: text, headings */
  --color-ink-2:        oklch(47.0% 0.028 165);  /* secondary text, labels */
  --color-ink-3:        oklch(54.0% 0.022 165);  /* tertiary: ids, timestamps */

  /* ---- Accent (one) ---- */
  --color-accent:        oklch(50.0% 0.115 158); /* emerald: primary action, links, active */
  --color-accent-hover:  oklch(44.0% 0.105 158);
  --color-accent-active: oklch(39.0% 0.095 158);
  --color-accent-soft:   oklch(94.5% 0.035 158);
  --color-on-accent:     oklch(99.2% 0.003 150);
  --color-focus:         oklch(50.0% 0.115 158);

  /* ---- Side rail (dark) ---- */
  --color-rail:          oklch(27.5% 0.045 165);
  --color-rail-2:        oklch(33.5% 0.050 165); /* hover / active item */
  --color-rail-rule:     oklch(36.0% 0.045 165);
  --color-rail-ink:      oklch(93.0% 0.012 150);
  --color-rail-ink-2:    oklch(76.0% 0.025 155);
  --color-rail-accent:   oklch(76.0% 0.110 158);

  /* ---- Status (semantic, always paired with a text label) ---- */
  --color-danger:        oklch(50.0% 0.160 25);
  --color-danger-hover:  oklch(44.0% 0.150 25);
  --color-danger-soft:   oklch(94.5% 0.030 25);
  --color-warning:       oklch(48.0% 0.100 75);
  --color-warning-soft:  oklch(95.0% 0.045 85);
  --color-info:          oklch(47.0% 0.070 235);
  --color-info-soft:     oklch(94.5% 0.020 235);

  /* ---- Type: Be Vietnam Pro carries display + body; JetBrains Mono for ids/code ---- */
  --font-display: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body:    "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --text-2xs: 0.6875rem;  /* 11 — rail group labels */
  --text-xs:  0.75rem;    /* 12 — table heads, badges */
  --text-sm:  0.8125rem;  /* 13 — labels, small buttons, help */
  --text-md:  0.9375rem;  /* 15 — body */
  --text-lg:  1.0625rem;  /* 17 — card titles */
  --text-xl:  1.5rem;     /* 24 — page title */
  --text-2xl: 2.25rem;    /* 36 — dashboard figures */

  --leading-tight: 1.25;
  --leading-body:  1.55;

  /* ---- Space (4 pt) ---- */
  --space-3xs: 0.125rem;
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;

  /* ---- Shape ---- */
  --radius-xs:      4px;
  --radius-control: 8px;
  --radius-card:    12px;
  --radius-pill:    999px;
  --rule-hair:      1px;

  --control-h:    2.5rem;   /* 40 */
  --control-h-sm: 2rem;     /* 32 */
  --control-h-xs: 1.625rem; /* 26 */

  /* ---- Depth (restrained; borders do most of the work) ---- */
  --shadow-1:       0 1px 2px oklch(30.5% 0.045 165 / 0.06);
  --shadow-overlay: 0 4px 12px oklch(30.5% 0.045 165 / 0.10), 0 24px 48px -16px oklch(30.5% 0.045 165 / 0.28);
  --color-scrim:    oklch(27.5% 0.045 165 / 0.55);

  /* ---- Motion ---- */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.4, 0, 1, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-1: 120ms;
  --dur-2: 180ms;
}