/**
 * Velastrae Design System — Colors & Typography Tokens
 * =====================================================
 * Source of truth for all CSS custom properties.
 * Import this before page-shell.css and page-specific styles.
 *
 * RETIRED TOKENS (do NOT use):
 *   --morzar: #00ff88   (cyber-green, pre-eviction era)
 *   --vel: #d6e8f7      (companion color, multi-companion era)
 *   .button cyan-green gradient — replaced by --btn-primary-bg below
 */

:root {

  /* ─────────────────────────────────────────────────────
     PLUM  —  Primary accent color system
     Plum is the identity color of Velastrae.
     Use for: panel titles, active states, primary CTAs,
     focus rings, selected filter pills, key highlights.
  ───────────────────────────────────────────────────── */
  --plum-deep:   #2e1840;
  --plum-mid:    #4a2466;
  --plum-glow:   #6b3891;
  --plum-bright: #8b4db5;
  --plum-soft:   rgba(74,  36, 102, 0.20);
  --plum-faint:  rgba(74,  36, 102, 0.10);
  --plum-edge:   rgba(107, 56, 145, 0.32);

  /* ─────────────────────────────────────────────────────
     MOSS  —  Semantic "alive / healthy / strong"
     Use for: health bars, memory strength states,
     "active" thread pills, Packet chemistry fills.
     NOT for primary UI chrome or brand identity.
  ───────────────────────────────────────────────────── */
  --moss-deep:   #1f3d2f;
  --moss-mid:    #3d6b52;
  --moss-glow:   #5a8a6f;
  --moss-soft:   rgba(90, 138, 111, 0.18);
  --moss-faint:  rgba(90, 138, 111, 0.09);

  /* ─────────────────────────────────────────────────────
     CRIMSON  —  Warnings, urgent, unread
     Use sparingly. Only for true alerts.
  ───────────────────────────────────────────────────── */
  --crimson:      #8b2332;
  --crimson-glow: rgba(139, 35, 50, 0.42);
  --crimson-soft: rgba(139, 35, 50, 0.14);

  /* ─────────────────────────────────────────────────────
     GOLD  —  Threshold accents
     Use for: quote tickers, dream borders, milestone
     indicators. Never as a primary brand color.
  ───────────────────────────────────────────────────── */
  --gold-dim:  #b5935a;
  --gold-glow: rgba(181, 147, 90, 0.24);
  --gold-soft: rgba(181, 147, 90, 0.10);

  /* ─────────────────────────────────────────────────────
     SKY / NIGHT  —  Background and panel fills
     The darkness behind the glass.
  ───────────────────────────────────────────────────── */
  --sky-base:  #07101d;   /* html/body bg fallback */
  --sky-deep:  #0a1220;   /* page body over bg image */
  --sky-panel: rgba(14,  24,  38,  0.88);  /* primary glass panel */
  --sky-card:  rgba(22,  34,  52,  0.78);  /* nested card / inner panel */
  --sky-edge:  rgba(172, 198, 232, 0.14);  /* panel borders (cool-blue tint) */

  /* ─────────────────────────────────────────────────────
     INK  —  Text hierarchy
     Parchment off-white — never stark white.
  ───────────────────────────────────────────────────── */
  --ink-warm:   #ede6d2;               /* primary text */
  --ink-muted:  rgba(237, 230, 210, 0.68);  /* secondary text */
  --ink-faint:  rgba(237, 230, 210, 0.42);  /* metadata, timestamps */
  --ink-ghost:  rgba(237, 230, 210, 0.24);  /* placeholder, disabled */

  /* ─────────────────────────────────────────────────────
     SEMANTIC TOKENS  —  Named roles (use these in components)
  ───────────────────────────────────────────────────── */

  /* Backgrounds */
  --bg-base:        var(--sky-base);
  --bg-panel:       var(--sky-panel);
  --bg-card:        var(--sky-card);
  --bg-panel-hover: rgba(14, 24, 38, 0.94);

  /* Borders */
  --border-panel:  var(--sky-edge);
  --border-plum:   var(--plum-edge);
  --border-moss:   rgba(90, 138, 111, 0.28);
  --border-gold:   var(--gold-glow);

  /* Text */
  --text-primary:   var(--ink-warm);
  --text-secondary: var(--ink-muted);
  --text-meta:      var(--ink-faint);
  --text-accent:    var(--plum-bright);
  --text-health:    var(--moss-glow);
  --text-alert:     var(--crimson);
  --text-ritual:    var(--gold-dim);

  /* Accents / states */
  --accent-primary:  var(--plum-mid);
  --accent-hover:    var(--plum-glow);
  --accent-health:   var(--moss-glow);
  --accent-alert:    var(--crimson);
  --accent-ritual:   var(--gold-dim);

  /* Buttons */
  --btn-primary-bg:      linear-gradient(135deg, var(--plum-mid), var(--plum-glow));
  --btn-primary-color:   var(--ink-warm);
  --btn-secondary-bg:    var(--plum-soft);
  --btn-secondary-border: var(--plum-edge);

  /* ─────────────────────────────────────────────────────
     BORDER RADIUS SCALE
  ───────────────────────────────────────────────────── */
  --radius-xl:   24px;   /* nav cards, portrait frames */
  --radius-lg:   18px;   /* standard panels */
  --radius-md:   14px;   /* nested cards, notices */
  --radius-sm:   10px;   /* chips, inner radii */
  --radius-pill: 999px;  /* pill buttons, filter chips, icon hit areas */

  /* ─────────────────────────────────────────────────────
     SHADOW SYSTEM
  ───────────────────────────────────────────────────── */
  --shadow-lg:   0 24px 60px rgba(4, 8, 19, 0.42);   /* nav cards, modals */
  --shadow-md:   0 16px 36px rgba(4, 8, 19, 0.28);   /* standard panels */
  --shadow-sm:   0 6px  18px rgba(4, 8, 19, 0.18);   /* small chips */
  --shadow-glow-plum: 0 0 24px rgba(107, 56, 145, 0.28);  /* plum glow states */
  --shadow-glow-moss: 0 0 20px rgba(90, 138, 111, 0.22);  /* health glow states */

  /* ─────────────────────────────────────────────────────
     GLASS BLUR
  ───────────────────────────────────────────────────── */
  --blur-panel: 18px;   /* canonical panel blur */
  --blur-nav:   16px;   /* top-nav blur */
  --blur-heavy: 24px;   /* modal / overlay blur */

  /* ─────────────────────────────────────────────────────
     TYPOGRAPHY  —  Font stacks
  ───────────────────────────────────────────────────── */
  --font-display: 'Cinzel', 'Palatino Linotype', 'Book Antiqua', Georgia, serif;
  --font-body:    'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono:    'Courier New', 'Courier', monospace;

  /* Type scale */
  --text-hero:    clamp(38px, 6vw, 76px);
  --text-display: 32px;
  --text-title:   20px;
  --text-panel:   15px;   /* panel section headings (Cinzel, uppercase) */
  --text-body:    14px;
  --text-small:   13px;
  --text-meta:    12px;   /* minimum for multi-word text */
  --text-atomic:  11px;   /* absolute minimum — pill labels only */

  /* Line heights */
  --leading-tight:  0.98;   /* hero display */
  --leading-snug:   1.3;    /* titles */
  --leading-normal: 1.55;   /* body */
  --leading-loose:  1.7;    /* long-form body */

  /* Letter spacing */
  --tracking-display: 2px;
  --tracking-title:   0.14em;
  --tracking-caps:    0.12em;
  --tracking-meta:    0.08em;

  /* ─────────────────────────────────────────────────────
     SPACING SCALE
  ───────────────────────────────────────────────────── */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-7:   28px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;

  /* ─────────────────────────────────────────────────────
     TRANSITIONS
  ───────────────────────────────────────────────────── */
  --transition-fast:   0.15s ease;
  --transition-normal: 0.20s ease;
  --transition-slow:   0.24s ease;

  /* ─────────────────────────────────────────────────────
     LEGACY / SHELL COMPAT — kept for page-shell.css harmony
     (These match what page-shell.css references)
  ───────────────────────────────────────────────────── */
  --page-ink:   var(--ink-warm);
  --page-muted: var(--ink-muted);
  --page-faint: var(--ink-faint);
  --panel-dark: var(--sky-panel);
  --panel-mid:  rgba(87, 106, 147, 0.56);
  --panel-soft: rgba(214, 232, 247, 0.16);
  --line-soft:  rgba(214, 232, 247, 0.16);
}

/* ─────────────────────────────────────────────────────
   SEMANTIC TYPE ELEMENTS
───────────────────────────────────────────────────── */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--text-primary);
  margin: 0;
}

h1 {
  font-size: var(--text-hero);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
}

h2 {
  font-size: var(--text-display);
  letter-spacing: 1px;
  line-height: var(--leading-snug);
}

h3 {
  font-size: 24px;
  letter-spacing: 0.5px;
}

p {
  font-family: var(--font-body);
  font-size: var(--text-body);
  color: var(--text-secondary);
  line-height: var(--leading-normal);
  margin: 0;
  text-wrap: pretty;
}

code {
  font-family: var(--font-mono);
  font-size: 0.88em;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  padding: 1px 5px;
  color: var(--plum-bright);
}

/* Panel-title pattern — Cinzel uppercase heading */
.ds-panel-title {
  font-family: var(--font-display);
  font-size: var(--text-panel);
  letter-spacing: var(--tracking-title);
  text-transform: uppercase;
  color: var(--text-accent);
}

/* Meta / kicker pattern */
.ds-meta {
  font-family: var(--font-body);
  font-size: var(--text-atomic);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-meta);
}

/* Ritual fragment — quote ticker style */
.ds-ritual {
  font-family: var(--font-display);
  font-size: 15px;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-ritual);
}

/* ─────────────────────────────────────────────────────
   GLASS PANEL UTILITY CLASS
───────────────────────────────────────────────────── */

.glass-panel {
  background: var(--bg-panel);
  border: 1px solid var(--border-panel);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(var(--blur-panel));
  -webkit-backdrop-filter: blur(var(--blur-panel));
  box-shadow: var(--shadow-md);
  color: var(--text-primary);
}

/* ─────────────────────────────────────────────────────
   BUTTON SYSTEM  (replaces .button cyan-green)
───────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  border-radius: var(--radius-pill);
  padding: 12px 20px;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: var(--tracking-meta);
  text-transform: uppercase;
  transition: background var(--transition-normal), transform var(--transition-normal),
              box-shadow var(--transition-normal);
}

.btn-primary {
  background: var(--btn-primary-bg);
  color: var(--ink-warm);
}

.btn-primary:hover {
  box-shadow: var(--shadow-glow-plum);
  transform: translateY(-1px);
}

.btn-secondary {
  background: var(--btn-secondary-bg);
  border: 1px solid var(--btn-secondary-border);
  color: var(--ink-warm);
}

.btn-secondary:hover {
  background: var(--plum-soft);
  border-color: var(--plum-glow);
}

.btn-ghost {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--ink-muted);
}

.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--ink-warm);
}

.btn:disabled {
  cursor: not-allowed;
  opacity: 0.42;
}

/* ─────────────────────────────────────────────────────
   REDUCED MOTION
───────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}