/*
 * Theme tokens. Edit only this file to swap the whole site's look.
 *
 * Conventions:
 *   --foo       concrete color
 *   --foo-rgb   "R, G, B" triplet so you can compose opacity:
 *                 rgba(var(--foo-rgb), 0.4)
 *
 * Active theme: Gruvbox Dark.
 *
 * If you change brand hex values here, also update the three matching hex
 * values in each HTML file's <script>tailwind.config</script> block.
 */
:root {
    /* --- Brand (swapped: green primary, purple secondary) --- */
    --accent: #8ec07c;                     /* gruvbox bright aqua-green */
    --accent-rgb: 142, 192, 124;
    --accent-light: #b8bb26;                /* gruvbox bright green */
    --accent-light-rgb: 184, 187, 38;
    --accent-glow-rgb: 142, 192, 124;

    --cyan: #d3869b;                       /* gruvbox bright purple — secondary */
    --cyan-rgb: 211, 134, 155;
    --cyan-soft-rgb: 242, 188, 206;
    --violet-soft-rgb: 142, 192, 124;

    /* Text color when laid over the accent (e.g., primary button label). */
    --on-accent: #1d2021;

    /* --- Status --- */
    --error: #fb4934;                      /* gruvbox bright red */
    --error-rgb: 251, 73, 52;
    --warning: #fabd2f;                    /* gruvbox bright yellow */
    --warning-bright: #fe8019;             /* gruvbox bright orange */
    --slate: #928374;                      /* gruvbox gray */

    /* --- Page --- */
    --bg: #282828;                         /* gruvbox dark bg0 */
    --bg-deep: #1d2021;                    /* gruvbox dark bg0_h — elevated darker surface */
    --bg-deep-rgb: 29, 32, 33;

    /* --- Foreground / surfaces --- */
    --fg: #ebdbb2;                         /* gruvbox light fg */
    --fg-strong-rgb: 235, 219, 178;        /* "most prominent text" — remap target for text-white */
    --surface: rgba(var(--accent-rgb), 0.05);
    --surface-hover: rgba(var(--accent-rgb), 0.10);
    --border: rgba(var(--fg-strong-rgb), 0.10);
    --border-hover: rgba(var(--accent-rgb), 0.5);

    /* Prominence ladder (used by Tailwind utility overrides below) */
    --fg-strong: #ebdbb2;                  /* text-white */
    --fg-soft:   #d5c4a1;                  /* text-gray-200, text-gray-300 */
    --fg-muted:  #bdae93;                  /* text-gray-400, text-gray-500 */
    --fg-faint:  #928374;                  /* text-gray-600, text-gray-700 */

    /* Background canvas (circuit graph) */
    --canvas-opacity: 0.55;
    --canvas-blend: normal;
}

/* SVG gradient stops — bound to theme tokens. Apply via <stop class="..."> */
.grad-accent { stop-color: var(--accent); }
.grad-cyan   { stop-color: var(--cyan); }

/* --- Tailwind utility remaps -----------------------------------------------
 * Tailwind ships text-white / text-gray-N / text-white/N with hardcoded values.
 * We funnel them all through theme tokens so swapping :root above is enough.
 * --------------------------------------------------------------------------*/
.text-white { color: var(--fg-strong) !important; }
.text-gray-100, .text-gray-200, .text-gray-300 { color: var(--fg-soft) !important; }
.text-gray-400, .text-gray-500 { color: var(--fg-muted) !important; }
.text-gray-600, .text-gray-700 { color: var(--fg-faint) !important; }

.text-white\/95 { color: rgba(var(--fg-strong-rgb), 0.95) !important; }
.text-white\/85 { color: rgba(var(--fg-strong-rgb), 0.85) !important; }
.text-white\/80 { color: rgba(var(--fg-strong-rgb), 0.80) !important; }
.text-white\/70 { color: rgba(var(--fg-strong-rgb), 0.70) !important; }
.text-white\/65 { color: rgba(var(--fg-strong-rgb), 0.65) !important; }
.text-white\/55 { color: rgba(var(--fg-strong-rgb), 0.55) !important; }
.text-white\/45 { color: rgba(var(--fg-strong-rgb), 0.45) !important; }
.text-white\/30 { color: rgba(var(--fg-strong-rgb), 0.30) !important; }

/*
 * Alternate palettes — paste over the :root block above to swap.
 *
 * ── Original neon-purple Codag dark ────────────────────────────────────────
 * --accent: #7c5cfc;         --accent-rgb: 124, 92, 252;
 * --accent-light: #9d85fd;   --accent-light-rgb: 157, 133, 253;
 * --accent-glow-rgb: 139, 92, 246;
 * --cyan: #22d3ee;           --cyan-rgb: 34, 211, 238;
 * --cyan-soft-rgb: 165, 243, 252;   --violet-soft-rgb: 196, 181, 253;
 * --error: #ef4444;          --error-rgb: 248, 113, 113;
 * --warning: #f59e0b;        --warning-bright: #fbbf24;
 * --slate: #94a3b8;
 * --bg: #0d0a0b;             --bg-deep: #08080c;   --bg-deep-rgb: 8, 8, 12;
 * --fg: #e8e4e0;             --fg-strong-rgb: 255, 255, 255;
 * --surface: rgba(var(--accent-rgb), 0.03);  --surface-hover: rgba(var(--accent-rgb), 0.06);
 * --border: rgba(var(--fg-strong-rgb), 0.08); --border-hover: rgba(var(--accent-rgb), 0.4);
 * --fg-strong: #ffffff;  --fg-soft: #d1d5db;  --fg-muted: #9ca3af;  --fg-faint: #6b7280;
 * --canvas-opacity: 0.7;     --canvas-blend: normal;
 *
 * ── Gruvbox Light ─────────────────────────────────────────────────────────
 * --accent: #b16286;         --accent-rgb: 177, 98, 134;
 * --accent-light: #d3869b;   --accent-light-rgb: 211, 134, 155;
 * --accent-glow-rgb: 211, 134, 155;
 * --cyan: #427b58;           --cyan-rgb: 66, 123, 88;
 * --cyan-soft-rgb: 142, 192, 124;   --violet-soft-rgb: 211, 134, 155;
 * --error: #cc241d;          --error-rgb: 204, 36, 29;
 * --warning: #d79921;        --warning-bright: #fabd2f;
 * --slate: #928374;
 * --bg: #fbf1c7;             --bg-deep: #ebdbb2;   --bg-deep-rgb: 235, 219, 178;
 * --fg: #3c3836;             --fg-strong-rgb: 60, 56, 54;
 * --surface: rgba(var(--accent-rgb), 0.05);  --surface-hover: rgba(var(--accent-rgb), 0.10);
 * --border: rgba(var(--fg-strong-rgb), 0.13); --border-hover: rgba(var(--accent-rgb), 0.5);
 * --fg-strong: #3c3836;  --fg-soft: #504945;  --fg-muted: #665c54;  --fg-faint: #928374;
 * --canvas-opacity: 0.25;    --canvas-blend: multiply;
 *
 * Tailwind config hex sync, by theme:
 *   neon dark    → { accent: '#7c5cfc', 'accent-light': '#9d85fd', cyan: '#22d3ee' }
 *   gruvbox lt   → { accent: '#b16286', 'accent-light': '#d3869b', cyan: '#427b58' }
 *   gruvbox drk  → { accent: '#d3869b', 'accent-light': '#f2bcce', cyan: '#8ec07c' }
 */