/* ═══════════════════════════════════════
   CSS VARIABLES — Design Tokens
   ═══════════════════════════════════════ */

:root {
  /* ── Colors: Deep Space Theme ── */
  --bg-primary:      #010205;
  --bg-secondary:    #0a0e1a;
  --bg-panel:        rgba(8, 12, 28, 0.92);
  --bg-card:         rgba(15, 20, 40, 0.85);
  --bg-hover:        rgba(30, 40, 80, 0.6);
  --bg-active:       rgba(50, 70, 140, 0.4);

  --text-primary:    #e8ecf4;
  --text-secondary:  #8899bb;
  --text-muted:      #556688;
  --text-accent:     #7eb8ff;

  --border-color:    rgba(100, 140, 220, 0.15);
  --border-glow:     rgba(100, 160, 255, 0.3);

  /* ── Orbital Colors (by shell n) ── */
  --color-n1:        #00e5ff;   /* Cyan — 1s */
  --color-n2:        #aa66ff;   /* Violet — 2s,2p */
  --color-n3:        #ff4488;   /* Magenta — 3s,3p,3d */
  --color-n4:        #ffaa00;   /* Amber — 4s,...,4f */
  --color-n5:        #44ff88;   /* Green — 5th shell */
  --color-n6:        #ff6644;   /* Orange — 6th shell */
  --color-n7:        #ff44aa;   /* Pink — 7th shell */

  /* ── Element Category Colors ── */
  --cat-alkali:      #ff6b6b;
  --cat-alkaline:    #ffa94d;
  --cat-transition:  #ffd43b;
  --cat-post-trans:  #69db7c;
  --cat-metalloid:   #66d9e8;
  --cat-nonmetal:    #74c0fc;
  --cat-halogen:     #b197fc;
  --cat-noble:       #e599f7;
  --cat-lanthanide:  #ff8787;
  --cat-actinide:    #f783ac;
  --cat-unknown:     #868e96;

  /* ── Accent ── */
  --accent-blue:     #4dabf7;
  --accent-cyan:     #22b8cf;
  --accent-green:    #51cf66;
  --accent-red:      #ff6b6b;
  --accent-yellow:   #ffd43b;
  --accent-purple:   #9775fa;

  /* ── Typography ── */
  --font-primary:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:       'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
  --font-display:    'Orbitron', var(--font-primary);

  --fs-xs:   0.65rem;
  --fs-sm:   0.75rem;
  --fs-base: 0.85rem;
  --fs-md:   1rem;
  --fs-lg:   1.25rem;
  --fs-xl:   1.75rem;
  --fs-2xl:  2.5rem;

  /* ── Spacing ── */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-8: 48px;

  /* ── Layout ── */
  --panel-width:     300px;
  --top-bar-height:  52px;
  --periodic-height: 260px;
  --border-radius:   6px;
  --border-radius-lg: 10px;

  /* ── Transitions ── */
  --transition-fast:   120ms ease;
  --transition-normal: 250ms ease;
  --transition-slow:   500ms ease;

  /* ── Shadows ── */
  --shadow-sm:  0 1px 3px 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-glow: 0 0 20px rgba(100,160,255,0.15);

  /* ── Z-Index Layers ── */
  --z-canvas:    0;
  --z-panels:    10;
  --z-overlay:   20;
  --z-topbar:    30;
  --z-modal:     50;
  --z-loading:   100;
}

/* Google Fonts import (subset for performance) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&family=Orbitron:wght@500;700;900&display=swap');