/**
 * REDKERNEL/ui — Design Tokens
 * ============================================================================
 *
 * Extracted verbatim from the original `design.html` `:root` block.
 * Two themes are shipped:
 *
 *   :root                      → light theme (default)
 *   [data-theme="dark"]        → dark theme
 *
 * To switch themes, set `data-theme="dark"` on <html> (or any ancestor of the
 * components). A tiny helper hook for React is provided separately:
 *
 *   import { useTheme } from '@redkernel/ui'
 *
 * Tokens are grouped by category so users can scan/override them quickly:
 *
 *   1. Brand (red)             — accent color + alpha tints
 *   2. Surfaces                — bg / fg / muted / surface
 *   3. Lines                   — dividers, borders, hairlines
 *   4. Status                  — success / warn / strength
 *   5. On-accent               — content color sitting on top of red
 *   6. Shadows                 — elevation scale
 *   7. Radius                  — corner radius scale
 *   8. Layout                  — container / gutter / header / sidebar
 *   9. Fonts                   — sans / mono stacks
 *  10. Motion                  — easings + durations
 *  11. Focus                   — focus-visible ring
 *  12. Transition shortcuts    — precomposed transition strings
 *
 * NOTE: per-component animation variables (--sx, --sy, --rx, --ry, --gx, --gy)
 * are NOT global tokens — they are set inline on specific elements by hooks
 * like useMagnetic / useTilt. Don't move them here.
 */

/* ============================================================================
 * 1. Light theme (default)
 * ======================================================================== */

:root {
  /* 1.1 Brand — red accent + alpha tints */
  --red: #e30613;
  --red-soft: rgba(227, 6, 19, 0.1);
  --red-softer: rgba(227, 6, 19, 0.06);
  --red-tint: rgba(227, 6, 19, 0.16);
  --red-line: rgba(227, 6, 19, 0.22);
  --red-strong: rgba(227, 6, 19, 0.42);

  /* 1.2 Surfaces */
  --bg: #fbfbfc;
  --bg-2: #f7f8fa;
  --fg: #0f1114;
  --graphite: #171a1f;
  --muted: #6b7280;
  /* WCAG 4.5:1 against --bg/--surface (audit A11Y-010: was #9aa3b2, 2.29:1) */
  --muted-2: #646c78;
  --surface: #f2f3f6;
  --surface-2: #eceef2;

  /* 1.3 Lines */
  --line: rgba(15, 17, 20, 0.12);
  --line-2: rgba(15, 17, 20, 0.08);
  --line-3: rgba(15, 17, 20, 0.05);

  /* 1.4 Status
   * WCAG note (audit A11Y-010): strength bars are non-text UI indicators —
   * they must pass 3:1 against their background. The vivid amber/sky from
   * design.html fail on light backgrounds (2.0:1 / 2.6:1), so the light theme
   * uses darkened variants; the dark theme overrides them back to vivid
   * (where they pass easily). --warn passes 3:1 only as a FILL with dark
   * text on top — never use it as a text color on light backgrounds.
   */
  --success: #1f7a3e;
  --success-soft: rgba(31, 122, 62, 0.1);
  --success-line: rgba(31, 122, 62, 0.22);
  --success-bg: rgba(31, 122, 62, 0.06);
  --warn: #f5a623;
  --warn-text: #8a5a00; /* readable amber for text on light bg (5.4:1) */
  --warn-bg: rgba(245, 166, 35, 0.14);
  --strength-1: #dc2626;
  --strength-2: #b45309; /* darkened amber: 4.8:1 on light bg (was #f59e0b, 2.02:1) */
  --strength-3: #0369a1; /* darkened sky: 5.7:1 on light bg (was #0ea5e9, 2.61:1) */

  /* 1.5 On-accent — content sitting on top of red/graphite */
  --on-accent: #fff;
  --on-accent-soft: rgba(255, 255, 255, 0.1);

  /* 1.6 Shadows */
  --shadow: 0 20px 60px rgba(15, 17, 20, 0.1);
  --shadow-soft: 0 18px 45px rgba(15, 17, 20, 0.08);
  --shadow-sm: 0 6px 18px rgba(15, 17, 20, 0.06);
  --shadow-red: 0 16px 36px rgba(227, 6, 19, 0.22);
  --shadow-btn-hover: 0 14px 30px rgba(15, 17, 20, 0.1);
  --shadow-dark: 0 14px 32px rgba(15, 17, 20, 0.3);

  /* 1.7 Radius */
  --radius: 22px;
  --radius-md: 18px;
  --radius-sm: 14px;
  --radius-xs: 10px;
  --radius-pill: 999px;

  /* 1.8 Layout */
  --container: 1280px;
  --gutter: clamp(18px, 3vw, 30px);
  --header-h: 68px;
  --sidebar-w: 248px;

  /* 1.9 Fonts */
  --font-sans:
    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-mono:
    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    'Liberation Mono', 'Courier New', monospace;

  /* 1.10 Motion
   * v1.0.0-rc.3 (QA7-001): the design.html values (.18/.32/.55) read as
   * near-instant at 60fps — hover states especially felt like a flicker.
   * Uniformly slowed ~1.4x; JS exit windows live in src/lib/timing.ts. */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast: 0.24s;
  --t-med: 0.42s;
  --t-slow: 0.7s;

  /* 1.11 Focus — must pass WCAG 1.4.11 / 2.4.11 (≥3:1) in BOTH themes.
   * v0.9.5 used var(--red-line) (22% alpha) → 1.48:1 light / 1.32:1 dark:
   * the ring was practically invisible (audit A11Y-002). Now opaque. */
  --focus-ring: 2px solid var(--red); /* #e30613 vs #fbfbfc = 4.6:1 */
  --focus-ring-offset: 2px;

  /* 1.13 Layer scale — one source of truth for stacking order.
   * v0.9.5 hardcoded 90/120/140/160/200 across six files and toast (120)
   * rendered BEHIND modal (140) — toasts fired from a modal were invisible
   * (audit PERF-003). Consumers can override any layer via CSS variables. */
  --z-tooltip: 90;
  --z-dropdown: 100;
  --z-overlay: 200;
  --z-modal: 300;
  --z-toast: 400;
  --z-top: 500; /* command palette sits above everything, incl. toasts */

  /* 1.12 Transition shortcuts — precomposed for reuse in components */
  --tr-bg: background var(--t-fast) var(--ease-out);
  --tr-color: color var(--t-fast) var(--ease-out);
  --tr-border: border-color var(--t-fast) var(--ease-out);
  --tr-bg-color: var(--tr-bg), var(--tr-color);
  --tr-bg-border: var(--tr-bg), var(--tr-border);
  --tr-bg-color-border: var(--tr-bg), var(--tr-color), var(--tr-border);

  color-scheme: light;
}

/* ============================================================================
 * 2. Dark theme
 * ======================================================================== */

[data-theme='dark'] {
  /* 2.1 Brand */
  --red: #ff1a26;
  --red-soft: rgba(255, 26, 38, 0.12);
  --red-softer: rgba(255, 26, 38, 0.07);
  --red-tint: rgba(255, 26, 38, 0.2);
  --red-line: rgba(255, 26, 38, 0.28);
  --red-strong: rgba(255, 26, 38, 0.5);

  /* 2.2 Surfaces — muted/muted-2 swap in dark: the lighter gray is the
   * secondary text on dark backgrounds and must keep 4.5:1 (≈5.2:1 here). */
  --bg: #0d0f12;
  --bg-2: #101317;
  --fg: #f3f5f8;
  --graphite: #171a1f;
  --muted: #9aa3b2;
  --muted-2: #7e8794;
  --surface: #161a1f;
  --surface-2: #1c2128;

  /* 2.3 Lines */
  --line: rgba(255, 255, 255, 0.1);
  --line-2: rgba(255, 255, 255, 0.06);
  --line-3: rgba(255, 255, 255, 0.03);

  /* 2.4 Status — vivid strength colors pass easily on dark surfaces;
   * the light theme's darkened variants would be too dim here. */
  --success: #7ad99a;
  --success-soft: rgba(122, 217, 154, 0.1);
  --success-line: rgba(122, 217, 154, 0.24);
  --success-bg: rgba(122, 217, 154, 0.08);
  --warn: #f5a623;
  --warn-text: #f5c265; /* readable amber for text on dark bg */
  --warn-bg: rgba(245, 166, 35, 0.16);
  --strength-1: #ef4444;
  --strength-2: #f59e0b;
  --strength-3: #38bdf8;

  /* 2.6 Focus — opaque bright red for ≥3:1 on dark surfaces
   * (#ff5a63 vs #0d0f12 = 6.2:1; audit A11Y-002). */
  --focus-ring: 2px solid #ff5a63;
  --focus-ring-offset: 2px;

  /* 2.5 On-accent — dark surfaces in dark mode */
  --on-accent: #0d0f12;
  --on-accent-soft: rgba(0, 0, 0, 0.1);

  /* 2.6 Shadows — heavier in dark mode for depth */
  --shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
  --shadow-soft: 0 18px 45px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 6px 18px rgba(0, 0, 0, 0.35);
  --shadow-red: 0 16px 36px rgba(255, 26, 38, 0.3);
  --shadow-btn-hover: 0 14px 30px rgba(0, 0, 0, 0.45);
  --shadow-dark: 0 14px 32px rgba(0, 0, 0, 0.5);

  /* Radius / Layout / Fonts / Motion / Focus / Transition shortcuts
   * are NOT redefined here — they are theme-agnostic, the light-theme
   * values from :root cascade down. */

  color-scheme: dark;
}

/* ============================================================================
 * 3. Reduced motion — ported from design.html (audit A11Y-011)
 * ======================================================================== */

/* Users with vestibular sensitivity asked the OS to reduce motion — stop
 * every infinite/looping library animation and make transitions instant.
 * JS-driven effects (useMagnetic / useTilt / useReveal) already check the
 * media query themselves; this block covers CSS animations. */
@media (prefers-reduced-motion: reduce) {
  .skeleton,
  .progress-bar,
  .status-dot--loading,
  .spinner,
  .btn .btn-spinner,
  .toast,
  .modal,
  .modal-backdrop,
  .dropdown-menu,
  .cselect-menu,
  .cmdk,
  .cmdk-backdrop,
  .popover,
  .tooltip,
  .acc-panel,
  .acc-btn .acc-ico,
  .card,
  .sticker,
  .mark::before {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  /* Infinite loops are simply stopped rather than snap-finished. */
  .skeleton,
  .progress-bar::after,
  .status-dot--loading {
    animation: none !important;
  }
  /* Decorative transforms off (same as design.html). */
  .card[data-tilt],
  .sticker {
    transform: none !important;
  }
}

/* ============================================================================
 * 4. Forced colors (Windows High Contrast) — audit A11Y-013 baseline
 * ======================================================================== */

@media (forced-colors: active) {
  .check input,
  .radio input,
  .toggle input,
  .slider {
    forced-color-adjust: none;
    border: 1.5px solid ButtonText;
  }
  .check input:checked,
  .radio input:checked,
  .toggle input:checked {
    background: Highlight;
    border-color: Highlight;
  }
  .cselect-trigger {
    border: 1px solid ButtonText;
  }
  .cselect-option.is-selected::after {
    color: Highlight;
    forced-color-adjust: none;
  }
}