:root {
  /* === Colors - Warm obsidian palette with amber accent === */
  --bg-deep:        #0C0A09;
  --bg-surface:     #1C1917;
  --bg-elevated:    #292524;
  --bg-hover:       #3C3836;
  --bg-active:      #44403C;

  --accent-primary: #F0B429;
  --accent-primary-dim: #F0B42935;
  --accent-warm:    #E8553A;
  --accent-warm-dim: #E8553A35;
  --accent-blue:    #7EB8DA;
  --accent-blue-dim: #7EB8DA30;
  --accent-purple:  #C4A7E7;
  --accent-purple-dim: #C4A7E730;
  --accent-red:     #EB6F92;
  --accent-red-dim: #EB6F9235;
  --accent-green:   #9CCFA4;
  --accent-green-dim: #9CCFA430;
  --accent-yellow:  #F6C177;

  --text-primary:   #E7E0D8;
  --text-secondary: #A8A29E;
  --text-dim:       #6B6560;
  --text-inverse:   #0C0A09;

  --border-subtle:  #292524;
  --border-medium:  #44403C;
  --border-strong:  #6B6560;

  --gradient-hero:  linear-gradient(160deg, #0C0A09 0%, #151010 40%, #0C0A09 100%);
  --gradient-card:  linear-gradient(160deg, #1C1917 0%, #1a1209 100%);
  --gradient-accent: linear-gradient(135deg, #F0B429 0%, #E8553A 100%);
  --gradient-warm:  linear-gradient(135deg, #E8553A 0%, #C4A7E7 100%);

  /* === Typography - Chakra Petch (retro-digital retrofuturist), Newsreader (editorial serif), Fira Code === */
  --font-heading:   'Oxanium', system-ui, sans-serif;
  --font-body:      'Newsreader', Georgia, serif;
  --font-mono:      'Fira Code', 'Consolas', monospace;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.75rem;
  --text-3xl:  2.25rem;
  --text-4xl:  3rem;
  --text-5xl:  4.5rem;

  --leading-tight:  1.25;
  --leading-normal: 1.6;
  --leading-relaxed: 1.75;

  /* === Spacing === */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;

  /* === Layout === */
  --sidebar-width:      360px;
  --sidebar-collapsed:  0px;
  --content-max-width:  860px;
  --header-height:      0px;
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-full: 9999px;

  /* === Shadows === */
  --shadow-sm:    0 1px 2px rgba(0,0,0,0.4);
  --shadow-md:    0 4px 12px rgba(0,0,0,0.5);
  --shadow-lg:    0 8px 30px rgba(0,0,0,0.6);
  --shadow-xl:    0 16px 50px rgba(0,0,0,0.7);
  --shadow-glow:  0 0 20px var(--accent-primary-dim);
  --shadow-glow-warm: 0 0 20px var(--accent-warm-dim);

  /* === Transitions === */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast:   150ms;
  --duration-normal: 300ms;
  --duration-slow:   500ms;
  --duration-slower: 800ms;

  /* === Z-index === */
  --z-sidebar:  100;
  --z-header:   90;
  --z-tooltip:  200;
  --z-modal:    300;
  --z-overlay:  250;
}