/* === THE KID REPORTER — Gothic Neon Design Tokens === */
/* Dark inkwell base, aged parchment accents, neon edge highlights */

:root,
[data-theme='dark'] {
  /* === TYPOGRAPHY === */
  --font-display:   'UnifrakturMaguntia', 'Playfair Display', serif;
  --font-serif:     'Playfair Display', 'Georgia', serif;
  --font-sans:      'Plus Jakarta Sans', 'Inter', sans-serif;
  --font-mono:      'JetBrains Mono', monospace;

  /* Fluid type scale */
  --text-xs:    clamp(0.7rem,  0.65rem + 0.25vw, 0.8rem);
  --text-sm:    clamp(0.8rem,  0.75rem + 0.35vw, 0.95rem);
  --text-base:  clamp(0.95rem, 0.9rem  + 0.25vw, 1.1rem);
  --text-lg:    clamp(1.1rem,  1rem    + 0.75vw, 1.4rem);
  --text-xl:    clamp(1.3rem,  1.1rem  + 1.25vw, 2rem);
  --text-2xl:   clamp(1.8rem,  1.2rem  + 2.5vw,  3.2rem);
  --text-3xl:   clamp(2.2rem,  1rem    + 4vw,    4.5rem);
  --text-hero:  clamp(2.8rem,  0.5rem  + 7vw,    7rem);

  /* === 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;
  --space-24: 6rem;

  /* === DARK GOTHIC PALETTE === */
  /* Base surfaces */
  --color-ink:        #0c0b09;   /* deep inkwell black */
  --color-ink-soft:   #141210;   /* slightly lifted black */
  --color-ink-mid:    #1e1c18;   /* card / panel background */
  --color-ink-raised: #262320;   /* elevated surface */
  --color-ink-border: #332f2a;   /* subtle border */

  /* Aged parchment text */
  --color-parchment:       #e8dfc8;  /* primary text */
  --color-parchment-dim:   #b5aa92;  /* secondary text */
  --color-parchment-muted: #7a7060;  /* muted/placeholder */

  /* Brand reds (kept from original, warmed) */
  --color-blood:      #9e0e1e;   /* deep gothic red */
  --color-crimson:    #c8162a;   /* headline red */
  --color-ember:      #e63946;   /* bright accent red */

  /* === NEON HIGHLIGHTS === */
  --neon-cyan:     #00e5ff;    /* primary edge glow */
  --neon-lime:     #b2ff59;    /* breaking news / section rules */
  --neon-magenta:  #ff00e5;    /* card stripe / hover ping */
  --neon-gold:     #ffd600;    /* blockquote / donate border */
  --neon-violet:   #c77dff;    /* tag / category badge */

  /* Neon glow shadows */
  --glow-cyan:    0 0 8px #00e5ff, 0 0 20px rgba(0,229,255,0.4);
  --glow-lime:    0 0 8px #b2ff59, 0 0 20px rgba(178,255,89,0.4);
  --glow-magenta: 0 0 8px #ff00e5, 0 0 20px rgba(255,0,229,0.4);
  --glow-gold:    0 0 8px #ffd600, 0 0 20px rgba(255,214,0,0.4);
  --glow-violet:  0 0 8px #c77dff, 0 0 20px rgba(199,125,255,0.4);

  /* === SEMANTIC ALIASES === */
  --bg-page:        var(--color-ink);
  --bg-surface:     var(--color-ink-mid);
  --bg-raised:      var(--color-ink-raised);
  --color-border:   var(--color-ink-border);
  --color-text:     var(--color-parchment);
  --color-text-dim: var(--color-parchment-dim);
  --color-primary:  var(--color-crimson);
  --color-accent:   var(--neon-cyan);

  /* === RADIUS & SHADOW === */
  --radius-sm:  2px;
  --radius-md:  4px;
  --radius-lg:  6px;
  --radius-xl:  10px;

  --shadow-sm:  0 1px 3px rgba(0,0,0,0.6);
  --shadow-md:  0 4px 12px rgba(0,0,0,0.7);
  --shadow-lg:  0 8px 24px rgba(0,0,0,0.8);
  --shadow-xl:  0 16px 48px rgba(0,0,0,0.9);

  /* === LAYOUT === */
  --max-w-content: 1200px;
  --max-w-article: 720px;
  --col-gap:       clamp(1rem, 2vw, 2rem);

  /* === TRANSITIONS === */
  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in:   cubic-bezier(0.55, 0, 1, 0.45);
  --dur-fast:  150ms;
  --dur-base:  250ms;
  --dur-slow:  400ms;
}

/* Light mode override (aged parchment) */
[data-theme='light'] {
  --bg-page:        #f5f0e8;
  --bg-surface:     #ede6d6;
  --bg-raised:      #e5dcca;
  --color-border:   #c8bfa8;
  --color-text:     #1a1612;
  --color-text-dim: #4a4035;
  --color-accent:   #007acc;  /* toned-down cyan for light */
  --neon-cyan:      #0077bb;
  --neon-lime:      #3d8c00;
  --neon-magenta:   #990099;
  --neon-gold:      #aa7700;
  --glow-cyan:    0 0 4px rgba(0,119,187,0.5);
  --glow-lime:    0 0 4px rgba(61,140,0,0.5);
  --glow-magenta: 0 0 4px rgba(153,0,153,0.5);
  --glow-gold:    0 0 4px rgba(170,119,0,0.5);
}