/**
 * SciprogFi Design Tokens
 * CSS custom property layer consumed by base.css and overridden by era CSS.
 * Inspired by Arwes sci-fi UI vocabulary — neon palettes, glow effects,
 * scan-line overlays — mapped to SciprogFi's narrative arc.
 *
 * Dual neon palette: blue = Clean Net / surveillance / Drew's thread.
 *                    green = Open Net / OHC resistance / Synter.
 */

:root {
  /* --- Base palette (early eras) --- */
  --sf-bg: #fff;
  --sf-text: #1a1a1a;
  --sf-accent: #2c5f8a;
  --sf-muted: rgba(0,0,0,0.5);
  --sf-border: rgba(0,0,0,0.1);

  /* --- Dual neon palette (activates in later eras) --- */
  --sf-neon-green: hsl(100, 100%, 63%);   /* OHC / resistance / Synter */
  --sf-neon-blue: hsl(210, 90%, 60%);     /* Clean Net / surveillance */
  --sf-neon: var(--sf-neon-green);         /* Default neon — overridden per context */
  --sf-neon-dim: hsl(100, 60%, 40%);
  --sf-neon-glow: 0 0 4px var(--sf-neon);
  --sf-neon-glow-strong: 0 0 8px var(--sf-neon), 0 0 20px color-mix(in srgb, var(--sf-neon) 40%, transparent);
  --sf-dark: #050b0b;
  --sf-dark-surface: #0a1a1a;

  /* Circuit-trace background pattern (Biofects-inspired) — inline SVG */
  --sf-circuit: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cpath d='M0 30h20l5-5h10l5 5h20M30 0v20l-5 5v10l5 5v20' fill='none' stroke='%23ffffff' stroke-width='0.5' opacity='0.06'/%3E%3C/svg%3E");

  /* --- Typography --- */
  --sf-font-serif: Georgia, "Iowan Old Style", "Palatino Linotype", "Times New Roman", serif;
  --sf-font-sans: -apple-system, "Helvetica Neue", "Segoe UI", Arial, sans-serif;
  --sf-font-mono: "SF Mono", "Fira Code", "Fira Mono", Menlo, monospace;

  /* --- Spacing --- */
  --sf-space-xs: 0.25rem;
  --sf-space-sm: 0.5rem;
  --sf-space-md: 1rem;
  --sf-space-lg: 1.5rem;
  --sf-space-xl: 2.5rem;

  /* --- Animation --- */
  --sf-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --sf-duration-fast: 150ms;
  --sf-duration-med: 400ms;
  --sf-duration-slow: 800ms;

  /* --- Frame / component tokens --- */
  --sf-frame-color: var(--sf-neon);
  --sf-frame-width: 1px;
  --sf-frame-corner: 12px;
  --sf-frame-gap: 4px;
  --sf-frame-bg: transparent;

  /* --- Scan line tokens --- */
  --sf-scanline-opacity: 0;  /* 0 = off, set >0 in later eras */
  --sf-scanline-color: rgba(0,0,0,0.03);
  --sf-scanline-size: 2px;
}