/* packages/ui/src/tokens/index.css
   Color tokens owned by dark-light-theme (spec 114).
   Both :root (light) and html.dark (dark) palettes are defined here.
   Non-color primitives (--radius, --font-*) are also here. */
@import './fonts.css';

/* ── Light Mode (no .dark class — :root) ───────────────────────── */
:root {
  /* ── Border radius — ONE value system-wide. No ladder. ── */
  --radius: 4px;

  /* ── Shadow — light-mode structural default; overridden per-mode below ── */
  --shadow: 0 1px 4px oklch(12% 0.04 240 / 0.08);

  /* ── Typography ── */
  --font-display: 'Fraunces', 'PP Editorial New', 'Newsreader', Georgia, serif;
  --font-sans: 'IBM Plex Sans', Arial, sans-serif;
  --font-hebrew: 'Heebo Variable', 'Heebo', Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', 'Courier New', monospace;

  /* Backgrounds — white/pale-teal */
  --bg:        oklch(100% 0 0);
  --surface:   oklch(95% 0.016 195);
  --elevated:  oklch(100% 0 0);
  --hover:     oklch(92% 0.022 195);

  /* Accent — dark teal (VirtuAc brand) */
  --accent:         oklch(44% 0.12 195);
  --accent-mid:     oklch(54% 0.13 195);
  --accent-soft:    oklch(95% 0.022 195);
  --accent-border:  oklch(82% 0.04 195);

  /* Text — navy scale */
  --ink:           oklch(12% 0.04 240);
  --ink-soft:      oklch(22% 0.045 240);
  --ink-faint:     oklch(43% 0.035 235);
  --ink-on-accent: oklch(100% 0 0);
  --on-accent:     var(--ink-on-accent);
  --accent-fg:     var(--ink-on-accent);
  --accent-foreground: var(--ink-on-accent);

  /* Borders */
  --control-border: oklch(62% .03 195);
  --focus-ring:     oklch(62% .08 195);
  --line:        oklch(90% 0.03 195);
  --line-subtle: oklch(96% 0.014 195);

  /* Semantic */
  --success:    oklch(40% 0.13 155);
  --success-bg: oklch(95% 0.025 155);
  --warning:    oklch(52% 0.14 80);
  --warning-bg: oklch(97% 0.022 85);
  --danger:     oklch(44% 0.19 25);
  --danger-bg:  oklch(97% 0.018 25);
  --info:       oklch(44% 0.12 195);
  --info-bg:    oklch(95% 0.022 195);

  /* Shadows */
  --shadow-sm: 0 1px 4px oklch(12% 0.04 240 / 8%), 0 0 0 1px oklch(12% 0.04 240 / 4%);
  --shadow-md: 0 4px 12px oklch(12% 0.04 240 / 10%);
  --shadow-lg: 0 12px 32px oklch(12% 0.04 240 / 12%);

  /* ── Shell motion/depth/material tokens (from zc-ui-ux-designer) ── */
  --dur-instant: 80ms;   /* press feedback, hover-in, menu dismiss */
  --dur-fast:    140ms;  /* exits, context-menu open, tooltip */
  --dur-base:    200ms;  /* window open/close/snap-settle, panel slide */
  --dur-slow:    280ms;  /* mobile app open/close, shade pull */
  --dur-boot:    400ms;  /* shell boot fade ONLY — never reused */

  --ease-out:    cubic-bezier(0.2, 0, 0, 1);      /* entrances: fast start, soft landing */
  --ease-in:     cubic-bezier(0.3, 0, 1, 1);      /* exits: accelerate away */
  --ease-settle: cubic-bezier(0.2, 0.9, 0.27, 1.02); /* snap/drop settle: ≤2% overshoot */

  --shadow-window:         0 1px 2px oklch(0% 0 0 / 22%), 0 16px 48px oklch(0% 0 0 / 28%);
  --shadow-window-focused: 0 1px 3px oklch(0% 0 0 / 30%), 0 24px 64px oklch(0% 0 0 / 38%);
  --shadow-shell:          0 -1px 0 oklch(100% 0 0 / 4%), 0 8px 24px oklch(0% 0 0 / 30%); /* taskbar/panels */
  --shadow-drag:           0 2px 6px oklch(0% 0 0 / 35%), 0 32px 80px oklch(0% 0 0 / 45%); /* lifted while dragging */

  --radius-shell-frame: 8px;   /* window frames, widgets */
  --radius-shell-panel: 12px;  /* start menu, tray/notification panels, sheets */

  --material-shell-bg: color-mix(in oklch, var(--surface) 82%, transparent);
  --material-shell-blur: 24px;
  --material-shell-saturate: 1.3;

  --z-desktop: 0;
  --z-window: 10;        /* windows reorder via store order, NOT per-window z wars */
  --z-shell: 600;        /* taskbar / mobile nav bar */
  --z-shell-panel: 620;  /* start menu, tray panel, shade, drawer */
  --z-system-layer: 800; /* command center, system toasts, snap preview */
  --z-drag: 900;         /* drag ghosts, window while dragged */
}

/* ── Z-index scale — mode-independent ──────────────────────────── */
:root {
  --z-base:     0;
  --z-sticky:   100;
  --z-dropdown: 200;
  --z-modal:    300;
  --z-toast:    400;
  --z-tooltip:  500;
}

/* ── Dark Mode (.dark on <html> — default for new users) ────────── */
html.dark {
  /* Backgrounds — deep navy scale */
  --bg:        oklch(13% 0.035 240);
  --surface:   oklch(16% 0.042 240);
  --elevated:  oklch(18% 0.048 240);
  --hover:     oklch(21% 0.05 240);

  /* Accent — bright teal */
  --accent:         oklch(88% 0.16 191);
  --accent-mid:     oklch(78% 0.14 191);
  --accent-soft:    oklch(18% 0.06 195);
  --accent-border:  oklch(32% 0.08 195);

  /* Text — cool light scale */
  --ink:           oklch(95% 0.016 195);
  --ink-soft:      oklch(80% 0.028 210);
  --ink-faint:     oklch(61% .025 215);
  --ink-on-accent: oklch(13% 0.035 240);
  --on-accent:     var(--ink-on-accent);
  --accent-fg:     var(--ink-on-accent);
  --accent-foreground: var(--ink-on-accent);

  /* Borders */
  --control-border: oklch(49% .045 230);
  --focus-ring:     oklch(49% .08 195);
  --line:        oklch(24% 0.045 230);
  --line-subtle: oklch(19% 0.04 235);

  /* Semantic */
  --success:    oklch(72% 0.16 155);
  --success-bg: oklch(18% 0.04 155);
  --warning:    oklch(82% 0.18 85);
  --warning-bg: oklch(17% 0.04 85);
  --danger:     oklch(68% 0.22 25);
  --danger-bg:  oklch(17% 0.05 25);
  --info:       oklch(88% 0.16 191);
  --info-bg:    oklch(18% 0.06 195);

  /* Shadows */
  --shadow-sm: 0 1px 3px oklch(0% 0 0 / 50%), inset 0 1px 0 oklch(100% 0 0 / 4%);
  --shadow-md: 0 4px 8px oklch(0% 0 0 / 60%), inset 0 1px 0 oklch(100% 0 0 / 5%);
  --shadow-lg: 0 12px 24px oklch(0% 0 0 / 70%), inset 0 1px 0 oklch(100% 0 0 / 5%);
}

html:not(.dark) {
  --shadow-window:         0 1px 2px oklch(20% 0.03 240 / 10%), 0 16px 48px oklch(20% 0.03 240 / 14%);
  --shadow-window-focused: 0 1px 3px oklch(20% 0.03 240 / 14%), 0 24px 64px oklch(20% 0.03 240 / 20%);
  --shadow-shell:          0 -1px 0 oklch(0% 0 0 / 3%),  0 8px 24px oklch(20% 0.03 240 / 12%);
  --shadow-drag:           0 2px 6px oklch(20% 0.03 240 / 16%), 0 32px 80px oklch(20% 0.03 240 / 24%);
}

/* ── Native browser UI matching (scrollbars, form controls) ─────── */
html.dark        { color-scheme: dark; }
html:not(.dark)  { color-scheme: light; }

html[lang='he'] {
  --font-sans: var(--font-hebrew);
}

/* ── WCAG 2.1 AA — Visible keyboard focus (spec 115, SC 2.4.7). ──────────────
   Never suppress globally. outline: none without a :focus-visible alternative
   is a code-review gate violation. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius);
}

/* ── Skip link — first focusable element on every page (spec 115). ───────────
   Visible only on focus. Rendered by <SkipLink /> from @zync/ui — wired by
   app-shell as the first child of the root layout.
   z-index uses --z-toast (=400), owned by spec 114; do NOT redefine it here. */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--accent);
  color: var(--ink-on-accent);
  padding: 8px 16px;
  z-index: var(--z-toast);
  transition: top 150ms;
}
.skip-link:focus {
  top: 0;
}

/* NOTE: --ink-faint is NOT WCAG-compliant for readable text (contrast < 4.5:1).
   Use ONLY for decorative content, disabled controls, and placeholders. */

/* ── Reduced motion — WCAG 2.1 AA (spec 115, SC 2.3.3). ────────────────────
   Silences all CSS animations and transitions when the user prefers reduced
   motion. Tailwind animate-* / transition-* utilities are automatically
   covered by this rule.

   Three primitives require a *static element fallback*, not just speed
   reduction — they must use the useReducedMotion() hook from @zync/ui:
     • Spinner  → renders static "Loading…" / percentage text (see spinner.tsx)
     • Skeleton → pulse frozen at first frame (already via animate-none)
     • Toast    → appears instantly at final position (see toast.tsx)
*/
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}