@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=block');

/* Material Symbols base style */
.material-symbols-rounded {
  font-family: 'Material Symbols Rounded';
  font-weight: normal;
  font-style: normal;
  font-size: 1em;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  vertical-align: middle;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  user-select: none;
}

:root {
  /* Surface Colors */
  --bg:      #050508;
  --bg2:     #08080f;
  --glass:   rgba(255,255,255,0.055);
  --gb:      rgba(255,255,255,0.10);
  --ghi:     rgba(255,255,255,0.17);
  
  /* Brand Accents */
  --blue:    #3b82f6;  --blueg: rgba(59,130,246,0.35); --blue-rgb: 59, 130, 246;
  --emerald:  #10b981;  --violg: rgba(16,185,129,0.35);
  --cyan:    #38bdf8;
  --green:   #10b981;
  --pink:    #ec4899;
  --amber:   #f59e0b;
  --grey:    #94a3b8; --greyg: rgba(148, 163, 184, 0.35); --grey-rgb: 148, 163, 184;
  
  /* Typography Colors */
  --txt:     #eef2ff;
  --txt2:    rgba(238,242,255,0.60);
  --txt3:    rgba(238,242,255,0.35);
  
  /* Border Radii */
  --rsm: 10px; 
  --rmd: 18px; 
  --rlg: 28px; 
  --rxl: 44px;
  
  /* Animation Timings */
  --ease: cubic-bezier(0.23,1,0.32,1);
  --tf: 0.18s cubic-bezier(0.23,1,0.32,1);
  --ts: 0.40s cubic-bezier(0.23,1,0.32,1);
}

/* ─── Typography Selection ─── */
body {
  font-family: 'Inter', -apple-system, sans-serif;
}
.mono {
  font-family: 'JetBrains Mono', monospace;
}

/* ─── Theme Modes Contexts ─── */

/* Matte Dark Theme */
:root[data-theme-mode="matte"] {
  --bg:      #111111;
  --bg2:     #1a1a1a;
  --glass:   #222222;
  --gb:      #333333;
  --ghi:     #444444;
  --txt:     #f4f4f5;
  --txt2:    rgba(244,244,245,0.70);
  --txt3:    rgba(244,244,245,0.40);
}

/* OLED Stealth Theme */
:root[data-theme-mode="oled"] {
  --bg:      #000000;
  --bg2:     #050505;
  --glass:   rgba(255,255,255,0.03);
  --gb:      rgba(255,255,255,0.08);
  --ghi:     rgba(255,255,255,0.15);
  --txt:     #ffffff;
  --txt2:    rgba(255,255,255,0.70);
  --txt3:    rgba(255,255,255,0.40);
}

/* Nebula Radiant Theme */
:root[data-theme-mode="nebula"] {
  --bg:      #0a0118;
  --bg2:     #120329;
  --glass:   rgba(255,255,255,0.08);
  --gb:      rgba(139, 92, 246, 0.25);
  --ghi:     rgba(139, 92, 246, 0.5);
  --txt:     #f5f3ff;
  --txt2:    rgba(245,243,255,0.75);
  --txt3:    rgba(245,243,255,0.45);
  --blue:    #00f5ff; /* Cyan Neon */
  --blueg:   rgba(0, 245, 255, 0.4);
}

/* Light Mode Theme */
:root[data-theme-mode="light"] {
  --bg:      #f8fafc;
  --bg2:     #f1f5f9;
  --glass:   rgba(255,255,255,0.7);
  --gb:      rgba(0,0,0,0.1);
  --ghi:     rgba(0,0,0,0.2);
  --txt:     #0f172a;
  --txt2:    rgba(15,23,42,0.70);
  --txt3:    rgba(15,23,42,0.50);
}

/* High-Fidelity Glass Theme */
:root[data-theme-mode="glass-hifi"] {
    --bg: #0a0a0f;
    --bg2: #0f0f23;
    --glass: rgba(255, 255, 255, 0.08);
    --gb: rgba(255, 255, 255, 0.2);
    --ghi: rgba(255, 255, 255, 0.35);
    --blue: #3b82f6;
    --blueg: rgba(59, 130, 246, 0.5);
    --green: #10b981;
    --amber: #fbbf24;
    --txt: #f8fafc;
    --txt2: rgba(248, 250, 252, 0.7);
    --txt3: rgba(248, 250, 252, 0.45);
}

/* ─── Density Scales ─── */
:root[data-theme-density="compact"] {
  --rsm: 4px; --rmd: 8px; --rlg: 12px; --rxl: 20px;
}

/* ─── Dynamic Color Overrides ─── */
:root[data-theme-color="emerald"] {
  --blue: var(--emerald);
  --blueg: var(--violg);
}
:root[data-theme-color="amber"] {
  --blue: var(--amber);
  --blueg: rgba(245,158,11,0.35);
}
:root[data-theme-color="green"] {
  --blue: var(--green);
  --blueg: rgba(16,185,129,0.35);
}
:root[data-theme-color="grey"] {
  --blue: var(--grey);
  --blueg: var(--greyg);
  --blue-rgb: var(--grey-rgb);
}