/* ============================================================================
   LUMINARA DESIGN TOKENS
   Shared design system for: VYSIO, Envelope, Marketing site.
   Each token has a default value (dark theme) and a [data-theme="light"] override.
   Copy this file into your project; reference tokens via var().
   ============================================================================ */

:root,
:root[data-theme="dark"] {
  /* ── Backgrounds ── */
  --lum-bg-0:        #05060F;  /* deepest (page background) */
  --lum-bg-1:        #0a0a0c;  /* card / panel */
  --lum-bg-2:        #12121a;  /* nested panel */
  --lum-bg-3:        #1a1a2e;  /* elevated */
  --lum-bg-glass:    rgba(6, 6, 14, 0.72);   /* glassmorphic panel */
  --lum-bg-glass-2:  rgba(15, 15, 26, 0.85); /* heavier glass */
  --lum-overlay:     rgba(2, 2, 8, 0.92);    /* modal scrim */

  /* ── Text ── */
  --lum-text-0: #F4F1E6;   /* primary text (warm cream on dark) */
  --lum-text-1: #e8e8ec;   /* secondary text */
  --lum-text-2: rgba(255, 255, 255, 0.6);  /* dimmed */
  --lum-text-3: rgba(255, 255, 255, 0.4);  /* very dim */
  --lum-text-inverse: #05060F;  /* for use on bright accent backgrounds */

  /* ── Accent palette (semantic) ── */
  /* These are the "voice" colors. Each maps to a domain in the LUMINARA family. */
  --lum-accent-primary:    #c8ff00;  /* SIGNAL — primary CTA, "neon green" */
  --lum-accent-primary-soft: rgba(200, 255, 0, 0.15);
  --lum-accent-primary-glow: rgba(200, 255, 0, 0.5);

  --lum-accent-secondary:  #a855f7;  /* SPIRIT — purple, mystical/ai */
  --lum-accent-secondary-soft: rgba(168, 85, 247, 0.15);

  --lum-accent-tertiary:   #2dd4bf;  /* FLOW — teal, audio/sound */
  --lum-accent-tertiary-soft: rgba(45, 221, 191, 0.15);

  --lum-accent-warning:    #f59e0b;  /* ENERGY — amber, energy/heat */
  --lum-accent-warning-soft: rgba(245, 158, 11, 0.15);

  --lum-accent-danger:     #ef4444;  /* ALERT — red, recording/danger */
  --lum-accent-danger-soft: rgba(239, 68, 68, 0.15);

  --lum-accent-pink:       #f472b6;  /* EVOLUTION — pink, mutation */
  --lum-accent-pink-soft:  rgba(244, 114, 182, 0.15);

  --lum-accent-blue:       #60a5fa;  /* TEMP — blue, cold spectrum */
  --lum-accent-blue-soft:  rgba(96, 165, 250, 0.15);

  --lum-accent-cyan:       #00ffff;  /* SIGNAL-accent — cyan */
  --lum-accent-magenta:    #d946ef;  /* SHIFT — magenta */

  /* ── Borders / Dividers ── */
  --lum-border-1:  rgba(255, 255, 255, 0.08);
  --lum-border-2:  rgba(255, 255, 255, 0.12);
  --lum-border-3:  rgba(255, 255, 255, 0.2);
  --lum-border-accent: var(--lum-accent-primary-soft);

  /* ── Typography ── */
  --lum-font-display: 'Space Grotesk', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --lum-font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --lum-font-body:    var(--lum-font-display);

  --lum-text-3xs: 0.625rem;  /* 10px */
  --lum-text-2xs: 0.6875rem; /* 11px */
  --lum-text-xs:  0.75rem;   /* 12px */
  --lum-text-sm:  0.8125rem; /* 13px */
  --lum-text-md:  0.875rem;  /* 14px */
  --lum-text-lg:  1rem;      /* 16px */
  --lum-text-xl:  1.25rem;   /* 20px */
  --lum-text-2xl: 1.5rem;    /* 24px */

  --lum-tracking-wide: 0.12em;
  --lum-tracking-wider: 0.18em;
  --lum-tracking-tight: 0.04em;

  /* ── Spacing scale (4px base) ── */
  --lum-space-1: 0.25rem;
  --lum-space-2: 0.5rem;
  --lum-space-3: 0.75rem;
  --lum-space-4: 1rem;
  --lum-space-5: 1.25rem;
  --lum-space-6: 1.5rem;
  --lum-space-8: 2rem;
  --lum-space-10: 2.5rem;
  --lum-space-12: 3rem;

  /* ── Radii ── */
  --lum-radius-sm: 4px;
  --lum-radius-md: 6px;
  --lum-radius-lg: 10px;
  --lum-radius-xl: 14px;
  --lum-radius-pill: 999px;

  /* ── Motion ── */
  --lum-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --lum-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --lum-dur-fast: 0.18s;
  --lum-dur-base: 0.28s;
  --lum-dur-slow: 0.5s;

  /* ── Glassmorphism ── */
  --lum-glass-blur: blur(16px) saturate(1.4);
  --lum-glass-blur-strong: blur(24px) saturate(1.4);

  /* ── Shadows ── */
  --lum-shadow-sm: 0 4px 24px rgba(0, 0, 0, 0.4);
  --lum-shadow-md: 0 8px 32px rgba(0, 0, 0, 0.5);
  --lum-shadow-glow-primary: 0 0 8px var(--lum-accent-primary);
}

/* ============================================================================
   LIGHT THEME — for daytime / venue / print
   Inverts backgrounds; keeps accent colors (slightly dimmed for legibility).
   ============================================================================ */
:root[data-theme="light"] {
  /* ── Backgrounds ── */
  --lum-bg-0:        #F4F1E6;  /* page background (warm cream) */
  --lum-bg-1:        #ffffff;  /* card / panel */
  --lum-bg-2:        #f5f3eb;  /* nested panel */
  --lum-bg-3:        #e8e4d4;  /* elevated */
  --lum-bg-glass:    rgba(255, 255, 255, 0.85);
  --lum-bg-glass-2:  rgba(244, 241, 230, 0.92);
  --lum-overlay:     rgba(40, 30, 20, 0.4);

  /* ── Text ── */
  --lum-text-0: #1a1a1f;   /* deep ink */
  --lum-text-1: #2a2a30;
  --lum-text-2: rgba(20, 20, 25, 0.6);
  --lum-text-3: rgba(20, 20, 25, 0.4);
  --lum-text-inverse: #ffffff;

  /* Accent colors — slightly desaturated for legibility on light surfaces */
  --lum-accent-primary:    #8aae00;  /* dimmer neon green for legibility */
  --lum-accent-primary-soft: rgba(138, 174, 0, 0.15);
  --lum-accent-primary-glow: rgba(138, 174, 0, 0.4);

  --lum-accent-secondary:  #7c3aed;  /* deeper purple */
  --lum-accent-secondary-soft: rgba(124, 58, 237, 0.12);

  --lum-accent-tertiary:   #0d9488;  /* deeper teal */
  --lum-accent-tertiary-soft: rgba(13, 148, 136, 0.12);

  --lum-accent-warning:    #d97706;  /* deeper amber */
  --lum-accent-warning-soft: rgba(217, 119, 6, 0.12);

  --lum-accent-danger:     #dc2626;
  --lum-accent-danger-soft: rgba(220, 38, 38, 0.12);

  --lum-accent-pink:       #db2777;
  --lum-accent-pink-soft:  rgba(219, 39, 119, 0.12);

  --lum-accent-blue:       #2563eb;
  --lum-accent-blue-soft:  rgba(37, 99, 235, 0.12);

  --lum-accent-cyan:       #06b6d4;
  --lum-accent-magenta:    #c026d3;

  /* ── Borders ── */
  --lum-border-1:  rgba(0, 0, 0, 0.08);
  --lum-border-2:  rgba(0, 0, 0, 0.14);
  --lum-border-3:  rgba(0, 0, 0, 0.22);

  /* ── Glassmorphism ── */
  --lum-glass-blur: blur(20px) saturate(1.2);
  --lum-glass-blur-strong: blur(32px) saturate(1.2);

  /* ── Shadows ── */
  --lum-shadow-sm: 0 4px 24px rgba(60, 50, 30, 0.08);
  --lum-shadow-md: 0 8px 32px rgba(60, 50, 30, 0.12);
  --lum-shadow-glow-primary: 0 0 12px rgba(138, 174, 0, 0.3);
}

/* ============================================================================
   SEMANTIC ROLES — map accent colors to functional intent
   Use these in components, not the raw --lum-accent-* tokens.
   ============================================================================ */
:root {
  /* role:cta-primary       — main call-to-action button (e.g. "Start show") */
  /* role:cta-secondary     — secondary button (e.g. "Open sidebar") */
  /* role:surface-active    — currently-active/selected item background */
  /* role:signal-record     — recording indicator */
  /* role:signal-bass       — bass-band audio indicator */
  /* role:signal-mids       — mids-band audio indicator */
  /* role:signal-highs      — highs-band audio indicator */
  /* role:text-link         — interactive text link */
  /* role:text-on-accent    — text on top of accent backgrounds */

  /* Component-specific shortcuts — for convenience in vysio/envelope/marketing */
  --lum-bg-page:    var(--lum-bg-0);
  --lum-bg-panel:   var(--lum-bg-1);
  --lum-text-hi:    var(--lum-text-0);
  --lum-text-lo:    var(--lum-text-2);
  --lum-divider:    var(--lum-border-1);
}

/* Respect user OS preference if no manual override is set */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    color-scheme: light;
    --lum-bg-0:        #F4F1E6;
    --lum-bg-1:        #ffffff;
    --lum-text-0:      #1a1a1f;
    --lum-text-1:      #2a2a30;
    --lum-text-2:      rgba(20, 20, 25, 0.6);
    --lum-bg-glass:    rgba(255, 255, 255, 0.85);
    --lum-border-1:    rgba(0, 0, 0, 0.08);
    --lum-shadow-sm:   0 4px 24px rgba(60, 50, 30, 0.08);
    --lum-accent-primary: #8aae00;
    --lum-accent-secondary: #7c3aed;
    --lum-accent-tertiary: #0d9488;
  }
}