/* ============================================
   Phoenix Theme — Design Tokens
   Dark · Warm · Minimal
   ============================================ */

:root {
  /* --- Backgrounds --- */
  --bg-deep:          #0d0d12;
  --bg-surface:       #16161e;
  --bg-surface-hover: #1e1e28;
  --bg-elevated:      #1a1a26;
  --bg-card:          #1c1c28;
  --bg-input:         #12121e;
  --bg-overlay:       rgba(0,0,0,0.5);

  /* --- Frosted glass --- */
  --glass-bg:         rgba(22,22,30,0.72);
  --glass-border:     rgba(255,255,255,0.06);
  --glass-blur:       16px;

  /* --- Borders --- */
  --border-muted:     rgba(255,255,255,0.04);
  --border-default:   #1e1e28;
  --border-hover:     #2a2a3e;
  --border-focus:     #2997ff;

  /* --- Text --- */
  --text-primary:     #f0f0f4;
  --text-secondary:   #8e8e9e;
  --text-tertiary:    #5e5e6e;
  --text-muted:       rgba(255,255,255,0.12);
  --text-faint:       rgba(255,255,255,0.06);

  /* --- Accent: Amber (Iron Man glow) --- */
  --amber:            #f5a623;
  --amber-subtle:     rgba(245,166,35,0.10);
  --amber-border:     rgba(245,166,35,0.20);
  --amber-glow:       0 0 24px rgba(245,166,35,0.15);

  /* --- Accent: Blue (tech edge) --- */
  --blue:             #2997ff;
  --blue-subtle:      rgba(41,151,255,0.08);
  --blue-border:      rgba(41,151,255,0.18);
  --blue-glow:        0 0 24px rgba(41,151,255,0.12);

  /* --- Feedback --- */
  --green:            #30d158;
  --red:              #ff453a;
  --orange:           #f97316;
  --purple:           #a855f7;
  --pink:             #ff6488;

  /* --- Typography --- */
  --font-sans:        'Inter', -apple-system, BlinkMacSystemFont,
                      'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', sans-serif;
  --font-mono:        'SF Mono', 'Fira Code', 'JetBrains Mono', monospace;
  --font-weight-book: 400;
  --font-weight-med:  500;
  --font-weight-semi: 600;
  --font-weight-bold: 700;

  /* --- Border radius --- */
  --radius-xs:    4px;
  --radius-sm:    8px;
  --radius-md:    12px;
  --radius-lg:    16px;
  --radius-xl:    24px;
  --radius-full:  9999px;

  /* --- Shadows --- */
  --shadow-card:       0 30px 80px rgba(0,0,0,0.50),
                       0 0 0 1px var(--border-muted);
  --shadow-elevated:   0 8px 32px rgba(0,0,0,0.30);
  --shadow-button:     0 2px 0 rgba(0,0,0,0.20);

  /* --- Transitions --- */
  --transition-fast:   0.12s ease;
  --transition-normal: 0.20s ease;
  --transition-slow:   0.35s ease;

  /* --- Sizing --- */
  --max-width:         1100px;
  --page-padding:      24px;
}

/* --- Base reset --- */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-sans);
  background: var(--bg-deep);
  color: var(--text-primary);
  min-height: 100vh;
  line-height: 1.5;
}

::selection {
  background: var(--amber-subtle);
  color: var(--amber);
}

/* --- Scrollbar --- */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-hover); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-tertiary); }