/* ═══════════════════════════════════════════════════════════
   Grimorie Design System — Shared Variables & Fonts
   Aligned with landing.html Grimorie.ai rebrand.
   ═══════════════════════════════════════════════════════════ */

@font-face { font-family:'JetBrains Mono'; font-weight:400; font-style:normal; font-display:swap; src:url('/assets/fonts/JetBrainsMono-Regular.woff2') format('woff2'); }
@font-face { font-family:'JetBrains Mono'; font-weight:500; font-style:normal; font-display:swap; src:url('/assets/fonts/JetBrainsMono-Medium.woff2') format('woff2'); }
@font-face { font-family:'JetBrains Mono'; font-weight:600; font-style:normal; font-display:swap; src:url('/assets/fonts/JetBrainsMono-SemiBold.woff2') format('woff2'); }
@font-face { font-family:'JetBrains Mono'; font-weight:700; font-style:normal; font-display:swap; src:url('/assets/fonts/JetBrainsMono-Bold.woff2') format('woff2'); }
@font-face { font-family:'DM Sans'; font-weight:400 700; font-style:normal; font-display:swap; src:url('/assets/fonts/DMSans-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'DM Sans'; font-weight:400 700; font-style:normal; font-display:swap; src:url('/assets/fonts/DMSans-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'Instrument Serif'; font-weight:400; font-style:normal; font-display:swap; src:url('/assets/fonts/InstrumentSerif-normal-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Instrument Serif'; font-weight:400; font-style:normal; font-display:swap; src:url('/assets/fonts/InstrumentSerif-normal-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'Instrument Serif'; font-weight:400; font-style:italic; font-display:swap; src:url('/assets/fonts/InstrumentSerif-italic-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Instrument Serif'; font-weight:400; font-style:italic; font-display:swap; src:url('/assets/fonts/InstrumentSerif-italic-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

:root {
  /* Fire gradient system */
  --gm-fire-core: #d4ff00;
  --gm-fire-mid: #7aff2a;
  --gm-fire-deep: #00cc44;
  --gm-fire-glow: rgba(160, 255, 50, 0.25);

  /* Primary */
  --gm-primary: #7aff2a;
  --gm-primary-dim: rgba(122, 255, 42, 0.10);

  /* Surfaces — transparent glass, not solid */
  --gm-bg: #0d0d14;
  --gm-card: rgba(255, 255, 255, 0.04);
  --gm-surface: rgba(255, 255, 255, 0.06);
  --gm-terminal: rgba(0, 0, 0, 0.3);

  /* Borders — white-based transparency */
  --gm-border: rgba(255, 255, 255, 0.08);
  --gm-border-hover: rgba(122, 255, 42, 0.18);

  /* Text — white-based transparency */
  --gm-text: rgba(255, 255, 255, 0.65);
  --gm-text-bright: rgba(255, 255, 255, 0.92);
  --gm-text-dim: rgba(255, 255, 255, 0.35);

  /* Accents */
  --gm-cyan: #00d4ff;
  --gm-red: #ff6b6b;
  --gm-gold: #ffd93d;
  --gm-purple: #c792ea;

  /* Typography */
  --gm-font-mono: 'JetBrains Mono', monospace;
  --gm-font-heading: 'Instrument Serif', Georgia, serif;
  --gm-font-body: 'DM Sans', system-ui, sans-serif;

  /* Layout */
  --gm-radius: 16px;
  --gm-radius-sm: 10px;
  --gm-glass: blur(24px);
  --gm-content-max: 860px;
}

/* ═══════════════════════════════════════════════════════════
   Theme Overrides — loaded by all pages via grimoire-variables.css
   ═══════════════════════════════════════════════════════════ */
html[data-theme="pink"] {
  --gm-fire-core:#ff69b4; --gm-fire-mid:#ff1493; --gm-fire-deep:#cc0066;
  --gm-fire-glow:rgba(255,20,147,0.25);
  --gm-primary:#ff1493; --gm-primary-dim:rgba(255,20,147,0.10);
  --gm-border-hover:rgba(255,20,147,0.18);
}
html[data-theme="red"] {
  --gm-fire-core:#ff6600; --gm-fire-mid:#ff3300; --gm-fire-deep:#cc0000;
  --gm-fire-glow:rgba(255,51,0,0.25);
  --gm-primary:#ff3300; --gm-primary-dim:rgba(255,51,0,0.10);
  --gm-border-hover:rgba(255,51,0,0.18);
}
html[data-theme="blue"] {
  --gm-fire-core:#66ccff; --gm-fire-mid:#0080ff; --gm-fire-deep:#0044cc;
  --gm-fire-glow:rgba(0,128,255,0.25);
  --gm-primary:#0080ff; --gm-primary-dim:rgba(0,128,255,0.10);
  --gm-border-hover:rgba(0,128,255,0.18);
}

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

/* ═══════════════════════════════════════════════════════════
   Color Theme Palette — shared across all pages
   ═══════════════════════════════════════════════════════════ */
.gm-color-palette {
  display:flex; align-items:center; gap:10px;
}
.gm-color-dot {
  width:18px; height:18px; border-radius:50%; cursor:pointer;
  background:var(--dot-color);
  border:2px solid rgba(255,255,255,0.15);
  transition:all 0.3s ease;
  box-shadow:0 0 0 0 transparent;
}
.gm-color-dot:hover {
  transform:scale(1.25);
  border-color:rgba(255,255,255,0.4);
  box-shadow:0 0 12px var(--dot-color);
}
.gm-color-dot.active {
  border-color:rgba(255,255,255,0.6);
  box-shadow:0 0 8px var(--dot-color), 0 0 20px var(--dot-color);
  transform:scale(1.15);
}
.gm-nav-inner .gm-color-palette { margin-left: auto; }