/* datacore tokens — assembled verbatim from the numu Design System handoff:
   tokens/reset.css + tokens/base.css + tokens/themes/numu.css + tokens/compat.css.
   The app is self-contained (iframe): these are ITS tokens, not the shell's. */
/* ============================================================
   numu — reset  (token-driven, minimal)
   ------------------------------------------------------------
   Consumes the tokens. Body sits on the PAGE surface (--bg);
   cards/controls use --surface. Imported last.
   ============================================================ */

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font: var(--font-body);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--selection-bg); }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

code, kbd, samp, pre { font-family: var(--font-mono); font-size: 0.95em; }

table { font-variant-numeric: var(--numeric-tabular); }

:focus-visible {
  outline: var(--focus-width) solid var(--focus-ring);
  outline-offset: var(--focus-offset);
}

hr { border: 0; border-top: 1px solid var(--border); margin: var(--sp-4) 0; }

::placeholder { color: var(--text-mute); }
/* ============================================================
   numu — Structure tier  (theme-AGNOSTIC)
   ------------------------------------------------------------
   These are amenan-ui's frozen token CONTRACT names for the
   structural half: spacing, radius, the shared mono family, the
   type scale, density rhythm, motion, z-index and breakpoints.
   They are shared by EVERY theme — only the palette
   (tokens/themes/<name>.css) swaps per theme × mode. Values are
   numu-tuned (tight, dense) but the NAMES are the contract, so
   any theme drops in without a component edit.
   ============================================================ */

:root {
  /* spacing scale */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;

  /* radius (numu keeps tight corners; --radius-pill for true pills) */
  --radius-sm: 0.3rem;
  --radius: 0.4rem;
  --radius-lg: 0.6rem;
  --radius-pill: 999px;

  /* the shared monospace family (structure — data / identifiers / code).
     The per-theme display/body face is the palette token --font. */
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco,
               Consolas, "Liberation Mono", monospace;

  /* type scale */
  --text-2xs: 0.7rem;
  --text-xs:  0.75rem;
  --text-sm:  0.8rem;
  --text-md:  0.875rem;   /* body */
  --text-lg:  1rem;
  --text-xl:  1.125rem;
  --text-2xl: 1.375rem;
  --text-3xl: 1.75rem;

  --leading-tight: 1.25;   /* @kind other */
  --leading:       1.5;    /* @kind other */
  --leading-loose: 1.7;    /* @kind other */
  --weight-regular:  400;  /* @kind other */
  --weight-medium:   500;  /* @kind other */
  --weight-semibold: 600;  /* @kind other */
  --weight-bold:     700;  /* @kind other */
  --tracking-tight:  -0.01em;  /* @kind other */
  --tracking-normal: 0;        /* @kind other */
  --tracking-wide:   0.02em;   /* @kind other */
  --numeric-tabular: tabular-nums;  /* @kind other */

  /* composed font shorthands (built from the per-theme --font) */
  --font-body:  var(--weight-regular) var(--text-md)/var(--leading) var(--font);
  --font-title: var(--weight-semibold) var(--text-lg)/var(--leading-tight) var(--font);
  --font-code:  var(--weight-regular) var(--text-sm)/var(--leading) var(--font-mono);

  /* density rhythm */
  --row-h:  2.25rem;
  --ctl-h:  2.125rem;
  --ctl-h-sm: 1.75rem;
  --ctl-h-lg: 2.5rem;
  --pad-x:  0.7rem;
  --gap:    0.5rem;
  --topbar-h: 3.25rem;
  --rail-w:   15rem;       /* the text rail (numu's icon rail is its own width) */
  --tap-min:  2.25rem;

  /* focus geometry (the COLOR is the per-theme --focus-ring) */
  --focus-width:  2px;     /* @kind other */
  --focus-offset: -1px;    /* @kind other */

  /* the soft hairline "ring" (composite over the themed --border) */
  --ring: 0 0 0 1px var(--border);

  /* motion */
  --ease:     cubic-bezier(0.2, 0, 0, 1);     /* @kind other */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);  /* @kind other */
  --fast:     0.1s;   /* @kind other */
  --slow:     0.15s;  /* @kind other */
  --transition-control: border-color var(--fast) var(--ease),
                        background-color var(--fast) var(--ease),
                        color var(--fast) var(--ease);  /* @kind other */
  --transition-overlay: opacity var(--slow) var(--ease-out),
                        transform var(--slow) var(--ease-out);  /* @kind other */

  /* z-index scale — the stacking contract */
  --z-base: 0;         /* @kind other */
  --z-rail: 10;        /* @kind other */
  --z-topbar: 20;      /* @kind other */
  --z-side-panel: 30;  /* @kind other */
  --z-popover: 100;    /* @kind other */
  --z-toast: 200;      /* @kind other */
  --z-modal: 300;      /* @kind other */

  /* breakpoints (the documented source of truth; @media repeats the literal) */
  --bp-lg: 80rem;   /* @kind other */
  --bp-md: 64rem;   /* @kind other */
  --bp-sm: 48rem;   /* @kind other */

  /* chart STRUCTURAL tokens — the series colors are per-theme (--chart-1..8),
     these axis/grid/tooltip aliases track the themed palette */
  --chart-axis:  var(--text-dim);
  --chart-grid:  var(--border);
  --chart-track: var(--surface-2);
  --chart-tooltip-bg:     var(--surface);
  --chart-tooltip-border: var(--border);
  --chart-tooltip-text:   var(--text);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --fast: 0ms;   /* @kind other */
    --slow: 0ms;   /* @kind other */
  }
}
/* ============================================================
   numu — the numu theme (INK)  ·  palette tier
   ------------------------------------------------------------
   The default look: a monochrome INK accent (near-black in light,
   near-white in dark) over cool-neutral surfaces. Status hues and
   the chart palette stay colorful so data reads; only the accent —
   primary actions, active state, focus, links — is ink.

   Two-axis: html[data-theme="numu"] × [data-mode="light"|"dark"].
   :root resolves to numu-light (and follows prefers-color-scheme
   when no attributes are set), so linking styles.css gives the
   numu look out of the box.
   ============================================================ */

:root,
html[data-theme="numu"],
html[data-theme="numu"][data-mode="light"] {
  --bg: #f9fafb;
  --surface: #ffffff;
  --surface-2: #f3f4f6;
  --border: #e5e7eb;
  --text: #111827;
  --text-dim: #4b5563;
  --text-mute: #9ca3af;
  --accent: #111827;                                       /* ink */
  --accent-soft: color-mix(in srgb, #111827 8%, transparent);
  --on-accent: #ffffff;
  --ok: #16a34a;
  --warn: #d97706;
  --info: #2563eb;
  --danger: #dc2626;
  --hover: rgba(17, 24, 39, 0.05);
  --glass: rgba(255, 255, 255, 0.65);
  --glass-blur: 0px;
  --shadow: none;
  --shadow-popover: 0 4px 12px -2px rgba(15, 23, 42, 0.12), 0 2px 4px -2px rgba(15, 23, 42, 0.08);
  --shadow-dialog: 0 16px 40px -8px rgba(15, 23, 42, 0.22), 0 4px 10px -4px rgba(15, 23, 42, 0.10);
  --font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --signal: var(--accent);
  --signal-hover: #000000;
  --signal-tint: var(--accent-soft);
  --rule: var(--border);
  --rule-shadow: var(--shadow);
  --focus-ring: var(--accent);
  --chart-1: #111827;  --chart-2: #0891b2;  --chart-3: #7c3aed;  --chart-4: #16a34a;
  --chart-5: #d97706;  --chart-6: #dc2626;  --chart-7: #db2777;  --chart-8: #64748b;
  --status-backlog: #9ca3af;  --status-progress: #2563eb;  --status-review: #d97706;  --status-done: #16a34a;
  --selection-bg: #e5e7eb;
  color-scheme: light;
}

/* attribute-less + OS dark → numu dark */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b1120;
    --surface: #0f172a;
    --surface-2: #1e293b;
    --border: #243244;
    --text: #e5e7eb;
    --text-dim: #94a3b8;
    --text-mute: #64748b;
    --accent: #f3f4f6;                                     /* ink → paper */
    --accent-soft: color-mix(in srgb, #f3f4f6 12%, transparent);
    --on-accent: #0b1120;
    --ok: #22c55e;
    --warn: #f59e0b;
    --info: #60a5fa;
    --danger: #ef4444;
    --hover: rgba(255, 255, 255, 0.06);
    --glass: rgba(255, 255, 255, 0.045);
    --glass-blur: 0px;
    --shadow: none;
    --shadow-popover: 0 4px 14px -2px rgba(0, 0, 0, 0.55), 0 2px 6px -2px rgba(0, 0, 0, 0.5);
    --shadow-dialog: 0 18px 48px -8px rgba(0, 0, 0, 0.7), 0 6px 14px -4px rgba(0, 0, 0, 0.5);
    --font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --signal: var(--accent);
    --signal-hover: #ffffff;
    --signal-tint: var(--accent-soft);
    --rule: var(--border);
    --rule-shadow: var(--shadow);
    --focus-ring: var(--accent);
    --chart-1: #e5e7eb;  --chart-2: #22d3ee;  --chart-3: #a78bfa;  --chart-4: #4ade80;
    --chart-5: #fbbf24;  --chart-6: #f87171;  --chart-7: #f472b6;  --chart-8: #94a3b8;
    --status-backlog: #94a3b8;  --status-progress: #60a5fa;  --status-review: #f59e0b;  --status-done: #22c55e;
    --selection-bg: color-mix(in srgb, #f3f4f6 22%, transparent);
    color-scheme: dark;
  }
}

/* explicit numu dark */
html[data-theme="numu"][data-mode="dark"] {
  --bg: #0b1120;
  --surface: #0f172a;
  --surface-2: #1e293b;
  --border: #243244;
  --text: #e5e7eb;
  --text-dim: #94a3b8;
  --text-mute: #64748b;
  --accent: #f3f4f6;
  --accent-soft: color-mix(in srgb, #f3f4f6 12%, transparent);
  --on-accent: #0b1120;
  --ok: #22c55e;
  --warn: #f59e0b;
  --info: #60a5fa;
  --danger: #ef4444;
  --hover: rgba(255, 255, 255, 0.06);
  --glass: rgba(255, 255, 255, 0.045);
  --glass-blur: 0px;
  --shadow: none;
  --shadow-popover: 0 4px 14px -2px rgba(0, 0, 0, 0.55), 0 2px 6px -2px rgba(0, 0, 0, 0.5);
  --shadow-dialog: 0 18px 48px -8px rgba(0, 0, 0, 0.7), 0 6px 14px -4px rgba(0, 0, 0, 0.5);
  --font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --signal: var(--accent);
  --signal-hover: #ffffff;
  --signal-tint: var(--accent-soft);
  --rule: var(--border);
  --rule-shadow: var(--shadow);
  --focus-ring: var(--accent);
  --chart-1: #e5e7eb;  --chart-2: #22d3ee;  --chart-3: #a78bfa;  --chart-4: #4ade80;
  --chart-5: #fbbf24;  --chart-6: #f87171;  --chart-7: #f472b6;  --chart-8: #94a3b8;
  --status-backlog: #94a3b8;  --status-progress: #60a5fa;  --status-review: #f59e0b;  --status-done: #22c55e;
  --selection-bg: color-mix(in srgb, #f3f4f6 22%, transparent);
  color-scheme: dark;
}
/* ============================================================
   numu — compatibility bridge
   ------------------------------------------------------------
   The canonical tokens are amenan-ui's CONTRACT (tokens/base.css
   + tokens/themes/*). This file maps the earlier datacore token
   names onto the contract so existing screens, the UI kits, and
   numu's bound frontend keep rendering AND re-skin on a theme
   swap (each alias resolves to the themed contract token at use
   site). It also exposes the raw reference ramps the Colors
   specimen cards display.

   MIGRATION: new work should use the contract names directly
   (--surface-2, --text-dim, --accent-soft, --sp-3, --ctl-h, …);
   this bridge can be dropped once every consumer is migrated.
   ============================================================ */

:root {
  /* spacing */
  --space-0: 0;  --space-px: 1px;
  --space-1: var(--sp-1);  --space-2: var(--sp-2);  --space-3: var(--sp-3);  --space-4: var(--sp-4);
  --space-5: var(--sp-5);  --space-6: var(--sp-6);  --space-8: var(--sp-8);
  --space-10: 2.5rem;  --space-12: 3rem;  --space-16: 4rem;

  /* surfaces / text / border */
  --surface-subtle: var(--surface-2);
  --surface-sunken: var(--surface-2);
  --surface-overlay: var(--surface);
  --text-muted: var(--text-dim);
  --text-subtle: var(--text-mute);
  --text-on-accent: var(--on-accent);
  --border-strong: var(--border);
  --border-subtle: var(--border);

  /* accent / focus */
  --accent-tint: var(--accent-soft);
  --accent-hover: var(--signal-hover);
  --accent-border: var(--accent);
  --focus: var(--focus-ring);

  /* status + tints */
  --success: var(--ok);
  --warning: var(--warn);
  --success-tint: color-mix(in srgb, var(--ok) 14%, transparent);
  --warning-tint: color-mix(in srgb, var(--warn) 14%, transparent);
  --danger-tint: color-mix(in srgb, var(--danger) 14%, transparent);

  /* density / radius / font / pads */
  --control-h: var(--ctl-h);  --control-h-sm: var(--ctl-h-sm);  --control-h-lg: var(--ctl-h-lg);
  --radius-xs: var(--radius-sm);  --radius-full: var(--radius-pill);
  --font-sans: var(--font);
  --pad-control-x: var(--pad-x);  --pad-control-y: 0.4rem;
  --pad-section-x: 1rem;  --pad-section-y: 0.75rem;
  --pad-cell-x: 0.5rem;  --pad-cell-y: 0.3rem;  --pad-input-x: 0.3rem;  --pad-input-y: 0.2rem;

  /* elevation / motion / z legacy */
  --shadow-none: none;
  --shadow-focus: 0 0 0 3px var(--accent-soft);
  --ring-hairline: var(--ring);
  --ease-standard: var(--ease);
  --dur-instant: 0ms;  /* @kind other */
  --dur-fast: var(--fast);  --dur: var(--slow);  --dur-slow: var(--slow);
  --z-sticky: 2;  /* @kind other */
  --z-dropdown: var(--z-popover);  --z-dialog: var(--z-modal);
  --panel-w: 24rem;

  /* single-hue sequential chart ramp (accent intensity) */
  --chart-seq-1: color-mix(in srgb, var(--accent) 14%, var(--surface));
  --chart-seq-2: color-mix(in srgb, var(--accent) 38%, var(--surface));
  --chart-seq-3: color-mix(in srgb, var(--accent) 66%, var(--surface));
  --chart-seq-4: var(--accent);

  /* ---- raw reference ramps (theme-agnostic; shown by the Colors cards) ---- */
  --neutral-0:#ffffff; --neutral-50:#f9fafb; --neutral-100:#f3f4f6; --neutral-200:#e5e7eb;
  --neutral-300:#d1d5db; --neutral-400:#9ca3af; --neutral-500:#6b7280; --neutral-600:#4b5563;
  --neutral-700:#374151; --neutral-800:#1f2937; --neutral-900:#111827; --neutral-950:#0b1120;
  --slate-400:#94a3b8; --slate-700:#334155; --slate-800:#1e293b; --slate-900:#0f172a; --slate-950:#020617;
  --blue-50:#eff6ff; --blue-100:#dbeafe; --blue-400:#60a5fa; --blue-500:#3b82f6; --blue-600:#2563eb; --blue-700:#1d4ed8;
  --green-50:#f0fdf4; --green-500:#22c55e; --green-600:#16a34a; --green-700:#15803d;
  --amber-50:#fffbeb; --amber-500:#f59e0b; --amber-600:#d97706; --amber-700:#b45309;
  --red-50:#fef2f2; --red-500:#ef4444; --red-600:#dc2626; --red-700:#b91c1c;
}