/* ============================================================
   Spritedrop - Design Tokens (single source of truth)
   Reference SaaS palette: cinematic black, lime signal, compact glass
   ============================================================ */

:root {
  /* Default = light theme values */
  --gac-page-bg: #f7faf1;
  --gac-page-bg-2: #eef4e6;
  --gac-stage: #ffffff;
  --gac-surface: rgba(255, 255, 255, 0.74);
  --gac-surface-2: #eef4e6;

  --gac-text: #0f1510;
  --gac-muted: #3b4640;
  --gac-subtle: #6b7670;

  --gac-line: #d4dcc9;
  --gac-line-strong: rgba(15, 21, 16, 0.14);

  --gac-lime: #5f7f00;
  --gac-lime-hot: #466000;
  --gac-lime-ink: #f6fbf1;
  --gac-lime-glow: rgba(61, 90, 0, 0.18);

  --gac-accent-warm: #f4c43a;
  --gac-ember: #3d5a00;
  --gac-halo: rgba(61, 90, 0, 0.20);

  --gac-glass-bg:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(246, 250, 240, 0.72)),
    rgba(255, 255, 255, 0.86);
  --gac-glass-strong:
    linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(246, 250, 240, 0.84)),
    rgba(255, 255, 255, 0.94);
  --gac-glass-border: #c3cdb4;
  --gac-glass-shadow: rgba(20, 22, 18, 0.14);
  --gac-field-bg: rgba(255, 255, 255, 0.92);

  --gac-connector-rail: rgba(61, 90, 0, 0.34);
  --gac-connector-line: rgba(61, 90, 0, 0.85);
  --gac-connector-node: #3d5a00;

  --gac-shadow: 0 24px 70px rgba(16, 22, 20, 0.12);
  --gac-card-shadow: 0 12px 32px rgba(20, 22, 18, 0.07);

  --gac-success-bg: #e9fbef;
  --gac-success-line: #ccefd8;
  --gac-success-text: #21834a;
  --gac-danger-bg: #ffe8e3;
  --gac-danger-text: #8a2c1f;

  /* Layout */
  --gac-canvas: min(1440px, calc(100vw - 20px));
  --gac-topbar: min(1440px, calc(100vw - 20px));
  --gac-flow: 760px;
  --gac-export-gap: 14px;
  --gac-radius: 8px;
  --gac-radius-lg: 12px;

  /* Typography */
  --font-display: "Instrument Serif", "Times New Roman", serif;
  --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Noise overlay (light variant — multiply blend) */
  --gac-noise:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.18 0 0 0 0 0.22 0 0 0 0 0.16 0 0 0 0.45 0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");

  --nav-text: var(--gac-muted);
}

:root[data-theme="dark"] {
  --gac-page-bg: #020303;
  --gac-page-bg-2: #070908;
  --gac-stage: #090b0a;
  --gac-surface: rgba(13, 16, 14, 0.78);
  --gac-surface-2: #0f1210;

  --gac-text: #f5f6f1;
  --gac-muted: #a8aea7;
  --gac-subtle: #6f756d;

  --gac-line: rgba(255, 255, 255, 0.08);
  --gac-line-strong: rgba(255, 255, 255, 0.14);

  --gac-lime: #C8FF3A;
  --gac-lime-hot: #D6FF66;
  --gac-lime-ink: #0A0B0A;
  --gac-lime-glow: rgba(200, 255, 58, 0.35);

  --gac-accent-warm: #C8FF3A;
  --gac-ember: #C8FF3A;
  --gac-halo: rgba(200, 255, 58, 0.28);

  --gac-glass-bg:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.014)),
    rgba(10, 12, 11, 0.74);
  --gac-glass-strong:
    linear-gradient(180deg, rgba(255, 255, 255, 0.088), rgba(255, 255, 255, 0.018)),
    rgba(8, 10, 9, 0.88);
  --gac-glass-border: rgba(255, 255, 255, 0.11);
  --gac-glass-shadow: rgba(0, 0, 0, 0.58);
  --gac-field-bg: rgba(0, 0, 0, 0.42);

  --gac-connector-rail: rgba(200, 255, 58, 0.22);
  --gac-connector-line: rgba(200, 255, 58, 0.78);
  --gac-connector-node: #C8FF3A;

  --gac-shadow: 0 28px 80px rgba(0, 0, 0, 0.56);
  --gac-card-shadow: 0 14px 44px rgba(0, 0, 0, 0.38);

  --gac-success-bg: #1a3326;
  --gac-success-line: #3e6b4f;
  --gac-success-text: #9eecb4;
  --gac-danger-bg: #4a262b;
  --gac-danger-text: #ffc6cc;

  --nav-text: #d3e0d6;

  --gac-noise:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.84 0 0 0 0 1 0 0 0 0 0.14 0 0 0 0.18 0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
}