/* ═══════════════════════════════════════════════
   DESIGN TOKENS — Orbit
   Surface elevation · oklch accents · fluid scale
   ═══════════════════════════════════════════════ */

:root {
  /* ── Surface Elevation (5 levels, dark) ── */
  --surface-0: #0b0f1c;
  --surface-1: #111627;
  --surface-2: #171d32;
  --surface-3: #1e2540;
  --surface-4: #272e4e;

  /* ── Text Contrast Ladder ── */
  --text-1: rgba(255,255,255,0.95);
  --text-2: rgba(255,255,255,0.78);
  --text-3: rgba(255,255,255,0.55);
  --text-4: rgba(255,255,255,0.34);
  --text-5: rgba(255,255,255,0.16);

  /* ── Semantic aliases ── */
  --bg-deep:        var(--surface-0);
  --bg-nebula:      var(--surface-1);
  --surface:        var(--surface-2);
  --surface-hover:  var(--surface-3);
  --surface-active: var(--surface-4);
  --glass:          rgba(255,255,255,0.06);
  --glass-strong:   rgba(255,255,255,0.11);
  --glass-border:   rgba(255,255,255,0.09);
  --ink:            var(--text-1);
  --ink-secondary:  var(--text-2);
  --ink-muted:      var(--text-3);
  --ink-faint:      var(--text-4);
  --ink-disabled:   var(--text-5);

  /* ── Accent: Semen (coral tonal range) ── */
  --s-50:  #fff1ef;
  --s-100: #ffd5cf;
  --s-200: #ffab9d;
  --s-300: #ff8a78;
  --s-400: #ff7a6b;
  --s-500: #e85c4e;
  --s-600: #c43f32;
  --accent-semen:      var(--s-400);
  --accent-semen-glow: oklch(0.72 0.18 28 / 0.35);

  /* ── Accent: Karina (blue tonal range) ── */
  --k-50:  #edf2ff;
  --k-100: #c9d8ff;
  --k-200: #94b1ff;
  --k-300: #6d95ff;
  --k-400: #4a7cff;
  --k-500: #3561e0;
  --k-600: #224abf;
  --accent-karina:      var(--k-400);
  --accent-karina-glow: oklch(0.62 0.19 264 / 0.35);

  /* ── Accent: Shared (violet tonal range) ── */
  --p-50:  #f5f0ff;
  --p-100: #ddd0ff;
  --p-200: #c3a8ff;
  --p-300: #b07aff;
  --p-400: #9d5fff;
  --p-500: #8347e0;
  --p-600: #6a32bf;
  --accent-shared:      var(--p-300);
  --accent-shared-glow: oklch(0.62 0.2 300 / 0.3);

  /* ── Semantic Status ── */
  --danger:  #ff5c5c;
  --success: #4ecf8a;
  --warning: #f6bb61;

  /* ── Typography ── */
  --font-body:    'Manrope', system-ui, -apple-system, sans-serif;
  --font-display: 'Unbounded', 'Manrope', system-ui, sans-serif;

  --text-xs:   clamp(0.625rem, 0.6rem + 0.15vw, 0.75rem);
  --text-sm:   clamp(0.75rem, 0.72rem + 0.18vw, 0.875rem);
  --text-base: clamp(0.875rem, 0.84rem + 0.2vw, 1rem);
  --text-lg:   clamp(1.06rem, 1rem + 0.3vw, 1.25rem);
  --text-xl:   clamp(1.375rem, 1.25rem + 0.5vw, 1.75rem);
  --text-2xl:  clamp(1.75rem, 1.5rem + 1vw, 2.5rem);
  --text-3xl:  clamp(2.25rem, 1.8rem + 1.8vw, 3.5rem);
  --text-hero: clamp(2.75rem, 2rem + 3.5vw, 5rem);

  --leading-tight:   1.12;
  --leading-snug:    1.3;
  --leading-normal:  1.5;
  --leading-relaxed: 1.7;

  --weight-normal:   400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-black:    800;

  /* ── Spacing Scale ── */
  --space-2xs: 2px;
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  40px;
  --space-2xl: 64px;
  --space-3xl: 96px;

  /* ── Border Radii ── */
  --radius-xs:   6px;
  --radius-sm:   10px;
  --radius-md:   16px;
  --radius-lg:   24px;
  --radius-xl:   32px;
  --radius-full: 9999px;

  /* ── Shadows (multi-layer) ── */
  --shadow-sm:
    0 1px 2px rgba(0,0,0,0.3),
    0 2px 6px rgba(0,0,0,0.15),
    inset 0 1px 0 0 rgba(255,255,255,0.04);
  --shadow-md:
    0 4px 12px rgba(0,0,0,0.35),
    0 8px 24px rgba(0,0,0,0.2),
    inset 0 1px 0 0 rgba(255,255,255,0.05);
  --shadow-lg:
    0 8px 24px rgba(0,0,0,0.4),
    0 16px 48px rgba(0,0,0,0.25),
    inset 0 1px 0 0 rgba(255,255,255,0.05);
  --shadow-glow-s: 0 0 32px var(--accent-semen-glow);
  --shadow-glow-k: 0 0 32px var(--accent-karina-glow);
  --shadow-glow-p: 0 0 32px var(--accent-shared-glow);

  /* ── Motion ── */
  --ease-out:     cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in:      cubic-bezier(0.55, 0, 1, 0.45);
  --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-bounce:  cubic-bezier(0.68, -0.55, 0.27, 1.55);
  --ease-snappy:  cubic-bezier(0.2, 0, 0, 1);
  --ease-gentle:  cubic-bezier(0.4, 0, 0.2, 1);

  --dur-instant:  60ms;
  --dur-fast:     150ms;
  --dur-normal:   300ms;
  --dur-slow:     500ms;
  --dur-slower:   700ms;
  --dur-ambient:  20s;

  /* ── Z-Index Scale ── */
  --z-base:     1;
  --z-content:  10;
  --z-nav:      100;
  --z-fab:      110;
  --z-sheet:    200;
  --z-overlay:  300;
  --z-toast:    400;

  /* ── Layout ── */
  --content-max:   720px;
  --shell-padding: clamp(16px, 4vw, 32px);
  --nav-height:    64px;
  --fab-size:      52px;
  --safe-top:      env(safe-area-inset-top, 0px);
  --safe-bottom:   env(safe-area-inset-bottom, 0px);

  /* ── Comic-Book System (Orbit & shared panels) ── */
  --comic-bg:            var(--surface-2);
  --comic-bg-hover:      var(--surface-3);
  --comic-bg-active:     var(--surface-4);
  --comic-bg-elevated:   var(--surface-3);
  --comic-ink:           var(--ink);
  --comic-ink-secondary: var(--ink-secondary);
  --comic-ink-muted:     var(--ink-muted);
  --comic-ink-faint:     var(--ink-faint);
  --comic-border:        var(--ink-faint);
  --comic-border-bold:   var(--ink-secondary);
  --comic-shadow:        rgba(0, 0, 0, 0.5);
  --comic-dot-color:     rgba(255, 255, 255, 0.06);
  --comic-stripe-color:  rgba(255, 255, 255, 0.04);
}

/* ═══════════════════════════════════════════════
   LIGHT THEME
   ═══════════════════════════════════════════════ */
[data-theme="light"] {
  /* Surface Elevation */
  --surface-0: #f8f6f2;
  --surface-1: #f0ede7;
  --surface-2: #e8e4dd;
  --surface-3: #dfdbd3;
  --surface-4: #d5d0c7;

  /* Explicit re-declaration of semantic aliases (avoids cross-scope var resolution) */
  --bg-deep:        #f8f6f2;
  --bg-nebula:      #f0ede7;
  --surface:        #e8e4dd;
  --surface-hover:  #dfdbd3;
  --surface-active: #d5d0c7;

  /* Text — solid colors, no opacity */
  --text-1: #1a1a2e;
  --text-2: #2d2d44;
  --text-3: #4a4a66;
  --text-4: #7a7a96;
  --text-5: #b0b0c4;

  --ink:           #1a1a2e;
  --ink-secondary: #2d2d44;
  --ink-muted:     #4a4a66;
  --ink-faint:     #7a7a96;
  --ink-disabled:  #b0b0c4;

  /* Glass — opaque white for readable surfaces */
  --glass:        rgba(255,255,255,0.75);
  --glass-strong: rgba(255,255,255,0.92);
  --glass-border: rgba(0,0,0,0.1);

  /* Darker accents for light backgrounds */
  --accent-semen:      #e8553f;
  --accent-karina:     #3564db;
  --accent-shared:     #8347e0;
  --accent-semen-glow:  oklch(0.65 0.18 28 / 0.2);
  --accent-karina-glow: oklch(0.55 0.19 264 / 0.2);
  --accent-shared-glow: oklch(0.55 0.2 300 / 0.18);

  /* Shadows */
  --shadow-sm:
    0 1px 3px rgba(0,0,0,0.08),
    0 2px 8px rgba(0,0,0,0.04);
  --shadow-md:
    0 4px 14px rgba(0,0,0,0.1),
    0 8px 28px rgba(0,0,0,0.06);
  --shadow-lg:
    0 8px 28px rgba(0,0,0,0.12),
    0 16px 52px rgba(0,0,0,0.07);
  --shadow-glow-s: 0 0 20px oklch(0.65 0.18 28 / 0.2);
  --shadow-glow-k: 0 0 20px oklch(0.55 0.19 264 / 0.2);
  --shadow-glow-p: 0 0 20px oklch(0.55 0.2 300 / 0.18);

  /* Comic-Book System — light overrides */
  --comic-bg:            #fff;
  --comic-bg-hover:      #f5f5f5;
  --comic-bg-active:     #ececec;
  --comic-bg-elevated:   #fafafa;
  --comic-ink:           #111;
  --comic-ink-secondary: #2d2d2d;
  --comic-ink-muted:     #444;
  --comic-ink-faint:     #999;
  --comic-border:        #111;
  --comic-border-bold:   #111;
  --comic-shadow:        #111;
  --comic-dot-color:     rgba(17, 17, 17, 0.08);
  --comic-stripe-color:  rgba(17, 17, 17, 0.06);
}