/*
 * Sayli Design Tokens — copied verbatim from sayli-fe/src/tokens.css so the
 * status page stays pixel-consistent with the product. Do not hand-tune values
 * here; if the app's tokens change, re-copy this file.
 *
 * Principles:
 *   1. #0A0A0A canvas. Pure white ink. Grays in between, no hue.
 *   2. Every interactive surface is VISIBLE at rest. Hover lifts, never reveals.
 *   3. Corners use the Apple super-ellipse (squircle) where supported.
 *   4. Six type sizes. Eight spacing steps. Three motion durations. One ease.
 */

:root {
  color-scheme: dark;

  /* ── Surfaces ── */
  --bg-canvas: #0a0a0a;
  --bg-sunk: #0a0a0a;
  --bg-tile: #1a1a1c;
  --bg-tile-hover: #232326;
  --bg-tile-active: #2a2a2e;
  --bg-input: #161618;
  --bg-raised: rgba(255, 255, 255, 0.06);
  --bg-raised-hover: rgba(255, 255, 255, 0.1);

  /* Tint ladder (flips to black tints in light mode) */
  --tintw-02: rgba(255, 255, 255, 0.02);
  --tintw-03: rgba(255, 255, 255, 0.03);
  --tintw-04: rgba(255, 255, 255, 0.04);
  --tintw-05: rgba(255, 255, 255, 0.05);
  --tintw-06: rgba(255, 255, 255, 0.06);
  --tintw-08: rgba(255, 255, 255, 0.08);
  --tintw-10: rgba(255, 255, 255, 0.1);
  --tintw-12: rgba(255, 255, 255, 0.12);
  --tintw-16: rgba(255, 255, 255, 0.16);
  --tintw-24: rgba(255, 255, 255, 0.24);
  --tintw-30: rgba(255, 255, 255, 0.3);

  /* Glass surfaces (floating-pane mode) */
  --bg-glass: rgba(20, 20, 22, 0.62);
  --bg-glass-strong: rgba(20, 20, 22, 0.78);
  --bg-pane-surface: rgba(10, 10, 10, 0.97);
  --bg-glass-solid: rgba(20, 20, 22, 0.95);
  --bg-popover: linear-gradient(var(--bg-glass-solid), var(--bg-glass-solid)), var(--bg-canvas);

  /* The ONE sanctioned win-green */
  --win: #3ecf8e;
  --on-win: #06281b;

  /* ── Hairlines & shadows ── */
  --hairline: rgba(255, 255, 255, 0.08);
  --hairline-strong: rgba(255, 255, 255, 0.14);
  --highlight-top: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  --shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-card: 0 8px 32px rgba(0, 0, 0, 0.45);
  --shadow-toast: 0 18px 48px rgba(0, 0, 0, 0.45);
  --shadow-glass: 0 24px 80px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.35);
  --glass-edges: inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 -1px 0 rgba(0, 0, 0, 0.22);

  /* ── Ink (text) ── */
  --ink: #ffffff;
  --ink-muted: rgba(255, 255, 255, 0.68);
  --ink-quiet: rgba(255, 255, 255, 0.58);
  --ink-faint: rgba(255, 255, 255, 0.34);
  --ink-ahead: rgba(255, 255, 255, 0.52);

  /* ── Accent (pure white — intensity of light, not a colored brand mark) ── */
  --accent: #ffffff;
  --accent-strong: #ffffff;
  --accent-soft: rgba(255, 255, 255, 0.1);
  --accent-glow: rgba(255, 255, 255, 0.22);
  --ink-hover: rgba(255, 255, 255, 0.92);
  --on-accent: #0a0a0a;
  --on-white: #0a0a0a;

  /* ── Semantic ── */
  --listening: #ffffff;
  --error: #ff6e6e;

  /* ── Type ── */
  --font-display: "Inter Tight Variable", "Inter Tight", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-ui: "Inter Tight Variable", "Inter Variable", "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono: var(--font-ui);
  --font-code: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  --type-display: 28px;
  --type-title-lg: 34px;
  --type-title: 17px;
  --type-title-sm: 20px;
  --type-body: 15px;
  --type-caption: 13px;
  --type-micro: 11px;
  --type-mono: 11px;

  --weight-regular: 470;
  --weight-medium: 500;
  --weight-semibold: 600;

  --leading-display: 1.18;
  --leading-title: 1.32;
  --leading-body: 1.5;
  --leading-caption: 1.4;
  --leading-micro: 1.3;

  --tracking-micro: 0.03em;
  --tracking-display: -0.02em;
  --tracking-tight: -0.02em;

  /* ── Space scale ── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  --width-read: 720px;
  --width-wide: 900px;

  /* ── Radii ── */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 24px;
  --radius-chip: 32px;
  --radius-button: 32px;
  --radius-input: 32px;
  --radius-card: 32px;
  --radius-card-lg: 32px;
  --radius-pane: 28px;
  --radius-strip: 28px;
  --radius-pill: 999px;

  /* ── Motion ── */
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-settle: cubic-bezier(0.19, 1, 0.22, 1);
  --dur-fast: 160ms;
  --dur-base: 240ms;
  --dur-slow: 400ms;
  --dur-settle: 340ms;
  --dur-drawer: 360ms;

  /* ── Glass material ── */
  --blur: blur(60px) saturate(190%) brightness(1.06);
  --blur-strong: blur(80px) saturate(220%) brightness(1.08);
  --glass-sheen: radial-gradient(140% 80% at 50% -20%, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.04) 35%, rgba(255, 255, 255, 0) 65%);
}

/* ── Light theme (data-theme="light" on <html>) ── */
:root[data-theme="light"] {
  color-scheme: light;

  --bg-canvas: #f5f5f7;
  --bg-sunk: #ececef;
  --bg-tile: #ffffff;
  --bg-tile-hover: #eaeaef;
  --bg-tile-active: #e2e2e9;
  --bg-input: #ffffff;
  --bg-raised: rgba(0, 0, 0, 0.05);
  --bg-raised-hover: rgba(0, 0, 0, 0.08);

  --tintw-02: rgba(0, 0, 0, 0.03);
  --tintw-03: rgba(0, 0, 0, 0.04);
  --tintw-04: rgba(0, 0, 0, 0.05);
  --tintw-05: rgba(0, 0, 0, 0.06);
  --tintw-06: rgba(0, 0, 0, 0.07);
  --tintw-08: rgba(0, 0, 0, 0.08);
  --tintw-10: rgba(0, 0, 0, 0.09);
  --tintw-12: rgba(0, 0, 0, 0.11);
  --tintw-16: rgba(0, 0, 0, 0.13);
  --tintw-24: rgba(0, 0, 0, 0.18);
  --tintw-30: rgba(0, 0, 0, 0.22);

  --bg-glass: rgba(250, 250, 252, 0.62);
  --bg-glass-strong: rgba(250, 250, 252, 0.8);
  --bg-pane-surface: rgba(248, 248, 250, 0.95);
  --bg-glass-solid: rgba(250, 250, 252, 0.95);
  --bg-popover: linear-gradient(var(--bg-glass-solid), var(--bg-glass-solid)), var(--bg-canvas);

  --hairline: rgba(0, 0, 0, 0.1);
  --hairline-strong: rgba(0, 0, 0, 0.16);
  --highlight-top: inset 0 1px 0 rgba(255, 255, 255, 0.6);
  --shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.1);
  --shadow-card: 0 8px 32px rgba(0, 0, 0, 0.12);
  --shadow-toast: 0 18px 48px rgba(0, 0, 0, 0.18);
  --shadow-glass: 0 24px 80px rgba(0, 0, 0, 0.18), 0 2px 8px rgba(0, 0, 0, 0.1);
  --glass-edges: inset 0 1px 0 rgba(255, 255, 255, 0.7), inset 0 -1px 0 rgba(0, 0, 0, 0.06);

  --ink: #1d1d1f;
  --ink-muted: rgba(0, 0, 0, 0.64);
  --ink-quiet: rgba(0, 0, 0, 0.58);
  --ink-faint: rgba(0, 0, 0, 0.38);
  --ink-ahead: rgba(0, 0, 0, 0.55);

  --accent: #1d1d1f;
  --accent-strong: #000000;
  --accent-soft: rgba(0, 0, 0, 0.06);
  --accent-glow: rgba(0, 0, 0, 0.18);
  --on-accent: #ffffff;
  --ink-hover: #38383a;

  --listening: #1d1d1f;
  --error: #d70015;
  --win: #1a8f5c;

  --blur: blur(60px) saturate(160%) brightness(1);
  --blur-strong: blur(80px) saturate(180%) brightness(1);
  --glass-sheen: radial-gradient(140% 80% at 50% -20%, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.2) 35%, rgba(255, 255, 255, 0) 65%);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
    --dur-settle: 0ms;
    --dur-drawer: 0ms;
  }
}

/* Apple super-ellipse corners where supported (no-op when radius is 0). */
@supports (corner-shape: squircle) {
  :where(*) {
    corner-shape: squircle;
  }
}