/* ORYN Design System v1 — Tokens (dark default).
 * Source of truth for every value used by every primitive and component.
 * Extracted from examples/docs/version_2 (frozen canonical seed).
 * No surface may declare a literal color, radius, or duration outside this file. */

:root,
[data-theme="dark"] {
  /* ── Backgrounds ────────────────────────────────────────────────── */
  --bg:           #05060d;
  --bg-2:         #0a0c18;
  --panel:        #0e1124;
  --panel-2:      #141833;
  --panel-3:      #1a1f44;

  /* ── Lines ──────────────────────────────────────────────────────── */
  --line:         rgba(140, 160, 255, 0.12);
  --line-2:       rgba(140, 160, 255, 0.22);
  --line-strong:  rgba(140, 180, 255, 0.40);

  /* ── Text ───────────────────────────────────────────────────────── */
  --text:         #e8ecff;
  --muted:        #8e95b8;
  --muted-2:      #6a7099;

  /* ── Brand accents ──────────────────────────────────────────────── */
  --cyan:         #5dc8ff;
  --cyan-soft:    #9be7ff;
  --violet:       #7c5cff;
  --violet-soft:  #bdaaff;
  --magenta:      #c778ff;
  --gold:         #ffcb6b;

  /* ── Semantic state ─────────────────────────────────────────────── */
  --good:         #4ce0a3;
  --warn:         #ffb454;
  --bad:          #ff6b8a;

  /* ── Signal currency ────────────────────────────────────────────── */
  --signal:       #5dc8ff;
  --signal-glow:  rgba(93, 200, 255, 0.45);

  /* ── Gradients ──────────────────────────────────────────────────── */
  --grad-brand:        linear-gradient(135deg, #5dc8ff 0%, #7c5cff 100%);
  --grad-brand-3:      linear-gradient(110deg, #5dc8ff 0%, #7c5cff 50%, #c778ff 100%);
  --grad-card:         linear-gradient(180deg, var(--panel-2) 0%, var(--panel) 100%);
  --grad-radial-violet: radial-gradient(1200px 600px at 80% -200px, rgba(124,92,255,0.18), transparent 60%);
  --grad-radial-cyan:   radial-gradient(900px 600px at -10% 10%, rgba(93,200,255,0.10), transparent 60%);

  /* ── Radii ──────────────────────────────────────────────────────── */
  --radius-sm:    10px;
  --radius:       16px;
  --radius-lg:    24px;
  --radius-pill:  999px;

  /* ── Spacing scale (4-multiple cadence) ─────────────────────────── */
  --space-1:       4px;
  --space-2:       8px;
  --space-3:      12px;
  --space-4:      16px;
  --space-5:      24px;
  --space-6:      32px;
  --space-7:      48px;
  --space-8:      80px;
  --space-9:     120px;

  /* ── Layout ─────────────────────────────────────────────────────── */
  --maxw:        1180px;
  --gutter:        24px;
  --header-h:      64px;
  --sidenav-w:    240px;

  /* ── Typography ─────────────────────────────────────────────────── */
  --font-sans:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-display: "Space Grotesk", "Inter", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", monospace;

  /* ── Shadows ────────────────────────────────────────────────────── */
  --shadow-cta:        0 0 0 1px rgba(255,255,255,0.08) inset, 0 8px 24px rgba(93,200,255,0.18);
  --shadow-cta-hover:  0 0 0 1px rgba(255,255,255,0.12) inset, 0 12px 30px rgba(93,200,255,0.30);
  --shadow-card-hover: 0 20px 60px rgba(0,0,0,0.40);
  --shadow-glow-cyan:  0 0 40px rgba(93,200,255,0.30);
  --shadow-glow-violet: 0 0 24px rgba(124,92,255,0.20);
  --shadow-popover:    0 24px 60px rgba(0,0,0,0.55);
  --shadow-focus:      0 0 0 2px var(--cyan);

  /* ── Z-index ────────────────────────────────────────────────────── */
  --z-base:      1;
  --z-raise:     2;
  --z-sticky:   50;
  --z-overlay: 100;
  --z-dialog:  200;
  --z-toast:   300;
  --z-cmdk:    400;

  /* ── Motion ─────────────────────────────────────────────────────── */
  --motion-instant: 100ms;
  --motion-fast:    150ms;
  --motion-base:    200ms;
  --motion-slow:    250ms;
  --ease-standard:  cubic-bezier(0.4, 0.0, 0.2, 1);
  --ease-emphasis:  cubic-bezier(0.2, 0.8, 0.2, 1);

  /* ── Breakpoints (informational; consumed via @media) ───────────── */
  --bp-sm:  780px;
  --bp-md:  880px;
  --bp-lg:  980px;
  --bp-xl: 1180px;

  /* ── Density ────────────────────────────────────────────────────── */
  --density-pad-y: var(--space-3);
  --density-pad-x: var(--space-4);
  --density-row-h: 44px;
}

[data-density="compact"] {
  --density-pad-y: var(--space-2);
  --density-pad-x: var(--space-3);
  --density-row-h: 36px;
}

* { box-sizing: border-box; }

/* `hidden` attribute behavior (10F.9c root-cause fix).
 *
 * UA stylesheets ship `[hidden] { display: none }` at specificity
 * (0,1,0). Any later rule that sets `display:` on a class selector
 * (same specificity, but later in the cascade) silently wins —
 * `.o-cmdk-backdrop { display: grid }` and `.o-dialog-backdrop {
 * display: grid }` are exactly such rules. Result: elements
 * authored with `hidden` (cmdk root, mobile drawer, dialog backdrop,
 * account menu) were rendered visible on every page load.
 *
 * The fix is to honor `[hidden]` with `!important`, so the cmdk and
 * its siblings stay hidden until script opens them.
 *
 * EXCEPTION (10F.9b): <html> and <body> must NEVER be hidden by
 * the `hidden` attribute. The override below is MORE SPECIFIC than
 * the generic `[hidden]` rule (type+attribute beats attribute), so
 * for the two roots `display: revert` still wins.
 */
[hidden] { display: none !important; }
html[hidden], body[hidden] { display: revert !important; }

html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.6 var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body {
  background:
    var(--grad-radial-violet),
    var(--grad-radial-cyan),
    radial-gradient(700px 500px at 50% 110%, rgba(124,92,255,0.10), transparent 60%),
    var(--bg);
  background-attachment: fixed;
}
a { color: var(--cyan); text-decoration: none; }
a:hover { color: var(--cyan-soft); }
h1, h2, h3, h4 {
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-weight: 600;
}
h1 { font-size: clamp(40px, 5.5vw, 68px); letter-spacing: -0.035em; }
h2 { font-size: clamp(30px, 3.5vw, 46px); letter-spacing: -0.03em; }
h3 { font-size: 22px; }
h4 { font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.12em; }
p  { margin: 0 0 12px; color: #c8cee6; }
code {
  background: #0a0c1c;
  border: 1px solid var(--line);
  padding: 2px 7px;
  border-radius: 6px;
  font-size: 0.88em;
  font-family: var(--font-mono);
  color: var(--cyan-soft);
}