/* Growthh Books design tokens — three layers:
   1. Primitive  (--p-*)   raw palette & scales. Never used directly by components.
   2. Semantic   (--color-*, --font-*, --space-*)  what a value MEANS. Themes swap only this layer.
   3. Component  (--btn-*, --row-h, --topbar-h …)  per-component knobs built from semantic tokens.
   Port: these become tailwind theme / CSS vars in the Vite app unchanged. */

:root {
  /* ── 1. Primitives ─────────────────────────────────────────────── */
  --p-ink-0: #ffffff; --p-ink-25: #fafbfc; --p-ink-50: #f6f7f9; --p-ink-100: #eef1f4; --p-ink-150: #e6e9ee;
  --p-ink-200: #dde2e8; --p-ink-300: #c4cbd5; --p-ink-400: #98a2b0; --p-ink-500: #6b7280; --p-ink-600: #4b5563;
  --p-ink-700: #374151; --p-ink-800: #1f2937; --p-ink-900: #111827;
  --p-night-950: #0b0f14; --p-night-900: #10151c; --p-night-850: #151b23; --p-night-800: #1b222c; --p-night-750: #222b37;
  --p-night-700: #2a3442; --p-night-600: #3b4757; --p-night-400: #8b98a8; --p-night-300: #b4bfcc; --p-night-100: #e6edf3;
  --p-teal-50: #effbf9; --p-teal-100: #d3f4ef; --p-teal-300: #5eead4; --p-teal-400: #2dd4bf; --p-teal-500: #14b8a6;
  --p-teal-600: #0d9488; --p-teal-700: #0f766e; --p-teal-800: #115e59; --p-teal-950: #042f2c;
  --p-amber-50: #fff8e1; --p-amber-100: #fff1c2; --p-amber-400: #f5b82e; --p-amber-500: #e0a100; --p-amber-700: #a16207; --p-amber-900: #3a2e0c;
  --p-red-50: #fef2f2; --p-red-400: #f87171; --p-red-700: #b91c1c; --p-red-950: #3b1213;
  --p-green-50: #f0fdf4; --p-green-400: #4ade80; --p-green-700: #15803d; --p-green-950: #0f2a1a;
  --p-blue-50: #eff6ff; --p-blue-400: #60a5fa; --p-blue-600: #2563eb; --p-blue-950: #0f1d3a;

  /* ── 2. Semantic (light) ───────────────────────────────────────── */
  color-scheme: light;
  --color-bg: var(--p-ink-50);
  --color-surface: var(--p-ink-0);
  --color-surface-2: var(--p-ink-25);
  --color-surface-3: var(--p-ink-100);
  --color-sunken: var(--p-ink-150);
  --color-border: var(--p-ink-200);
  --color-border-strong: var(--p-ink-300);
  --color-text: var(--p-ink-900);
  --color-text-2: var(--p-ink-600);
  --color-text-3: var(--p-ink-500);
  --color-primary: var(--p-teal-700);
  --color-primary-hover: var(--p-teal-800);
  --color-on-primary: #ffffff;
  --color-primary-soft: var(--p-teal-50);
  --color-primary-line: var(--p-teal-100);
  --color-selected: var(--p-amber-100);   /* keyboard cursor row — a nod to Tally's highlight bar */
  --color-selected-edge: var(--p-amber-500);
  --color-focus: var(--p-blue-600);
  --color-danger: var(--p-red-700); --color-danger-soft: var(--p-red-50);
  --color-success: var(--p-green-700); --color-success-soft: var(--p-green-50);
  --color-warning: var(--p-amber-700); --color-warning-soft: var(--p-amber-50);
  --color-info: var(--p-blue-600); --color-info-soft: var(--p-blue-50);
  --color-chrome: var(--p-ink-900);        /* top bar */
  --color-on-chrome: #e6e9ee;
  --color-on-chrome-2: #a5adba;
  --color-series-1: #2a78d6;               /* validated categorical pair (dataviz validator, light) */
  --color-series-2: #eb6834;
  --color-grid: var(--p-ink-150);
  --shadow-1: 0 1px 2px rgb(16 24 40 / 0.06);
  --shadow-2: 0 4px 12px rgb(16 24 40 / 0.08), 0 1px 3px rgb(16 24 40 / 0.06);
  --shadow-3: 0 16px 40px rgb(16 24 40 / 0.18), 0 2px 6px rgb(16 24 40 / 0.08);

  --font-sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
  --text-xs: 12px; --text-sm: 13px; --text-md: 14px; --text-lg: 16px; --text-xl: 18px; --text-2xl: 22px; --text-3xl: 28px;
  --leading-tight: 1.25; --leading: 1.45;
  --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700;

  --space-1: 2px; --space-2: 4px; --space-3: 6px; --space-4: 8px; --space-5: 12px; --space-6: 16px;
  --space-7: 20px; --space-8: 24px; --space-9: 32px; --space-10: 48px;
  --radius-sm: 4px; --radius: 6px; --radius-lg: 10px; --radius-pill: 999px;
  --duration-fast: 120ms; --duration: 180ms; --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);

  /* ── 3. Component ──────────────────────────────────────────────── */
  --topbar-h: 48px; --statusbar-h: 26px; --sidebar-w: 232px; --actionbar-w: 176px;
  --control-h: 32px; --control-h-sm: 28px; --row-h: 30px;
  --btn-radius: var(--radius); --input-radius: var(--radius-sm); --card-radius: var(--radius-lg);
  --table-head-bg: var(--color-surface-3); --table-zebra: var(--color-surface-2);
  --kbd-bg: var(--color-surface); --kbd-border: var(--color-border-strong);
  --z-sidebar: 20; --z-dialog: 50; --z-toast: 60;
}

/* Dark: its own steps, not an inversion. OS preference unless the user picked light explicitly. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;
    --color-bg: var(--p-night-950); --color-surface: var(--p-night-850); --color-surface-2: var(--p-night-900);
    --color-surface-3: var(--p-night-800); --color-sunken: var(--p-night-900); --color-border: var(--p-night-700);
    --color-border-strong: var(--p-night-600); --color-text: var(--p-night-100); --color-text-2: var(--p-night-300);
    --color-text-3: var(--p-night-400); --color-primary: var(--p-teal-400); --color-primary-hover: var(--p-teal-300);
    --color-on-primary: var(--p-teal-950); --color-primary-soft: #0e2a28; --color-primary-line: #164e48;
    --color-selected: var(--p-amber-900); --color-selected-edge: var(--p-amber-400); --color-focus: var(--p-blue-400);
    --color-danger: var(--p-red-400); --color-danger-soft: var(--p-red-950); --color-success: var(--p-green-400);
    --color-success-soft: var(--p-green-950); --color-warning: var(--p-amber-400); --color-warning-soft: var(--p-amber-900);
    --color-info: var(--p-blue-400); --color-info-soft: var(--p-blue-950); --color-chrome: #070a0e; --color-on-chrome: #e6edf3;
    --color-on-chrome-2: #8b98a8; --color-series-1: #3987e5; --color-series-2: #d95926; --color-grid: var(--p-night-750);
    --shadow-1: none; --shadow-2: 0 4px 16px rgb(0 0 0 / 0.4); --shadow-3: 0 20px 48px rgb(0 0 0 / 0.55);
  }
}
:root[data-theme='dark'] {
  color-scheme: dark;
  --color-bg: var(--p-night-950); --color-surface: var(--p-night-850); --color-surface-2: var(--p-night-900);
  --color-surface-3: var(--p-night-800); --color-sunken: var(--p-night-900); --color-border: var(--p-night-700);
  --color-border-strong: var(--p-night-600); --color-text: var(--p-night-100); --color-text-2: var(--p-night-300);
  --color-text-3: var(--p-night-400); --color-primary: var(--p-teal-400); --color-primary-hover: var(--p-teal-300);
  --color-on-primary: var(--p-teal-950); --color-primary-soft: #0e2a28; --color-primary-line: #164e48;
  --color-selected: var(--p-amber-900); --color-selected-edge: var(--p-amber-400); --color-focus: var(--p-blue-400);
  --color-danger: var(--p-red-400); --color-danger-soft: var(--p-red-950); --color-success: var(--p-green-400);
  --color-success-soft: var(--p-green-950); --color-warning: var(--p-amber-400); --color-warning-soft: var(--p-amber-900);
  --color-info: var(--p-blue-400); --color-info-soft: var(--p-blue-950); --color-chrome: #070a0e; --color-on-chrome: #e6edf3;
  --color-on-chrome-2: #8b98a8; --color-series-1: #3987e5; --color-series-2: #d95926; --color-grid: var(--p-night-750);
  --shadow-1: none; --shadow-2: 0 4px 16px rgb(0 0 0 / 0.4); --shadow-3: 0 20px 48px rgb(0 0 0 / 0.55);
}

/* Touch devices get 44px targets; desktop keeps the dense 32px rhythm. */
@media (pointer: coarse) {
  :root { --control-h: 44px; --control-h-sm: 40px; --row-h: 44px; }
}