/* ARCHONODE Design Tokens
 *
 * Single source of truth for the visual brand. Every landing page,
 * every component, every sub-tool reads from here. Never hardcode
 * a color or font name outside this file.
 *
 * Ground truth: extracted from https://archonode.com CSS on 2026-09-11
 * by archonode_extract_tokens.py. Re-run that script if the live
 * site ever changes.
 *
 * Usage in HTML:
 *   <link rel="stylesheet" href="/brand/tokens.css">
 *   <h1 style="color: var(--neon-cyan);">Signal Active</h1>
 *
 * Usage in Python (factory engines):
 *   from archonode_factory.brand.tokens import PALETTE, FONTS
 *   cover_color = PALETTE["neon_cyan"]
 */

:root {
    /* ===== Palette (from live site :root) ===== */
    --neon-cyan:    #00f0ff;  /* primary accent, "signal", action color */
    --neon-green:   #00ff9f;  /* success, "signal online", Phase I/II */
    --neon-pink:    #ff00aa;  /* alarm, error, important, Phase II/IV */
    --neon-purple:  #9d00ff;  /* rare, mythic, Phase V */
    --neon-yellow:  #ffe600;  /* unused in production but reserved for Phase III */

    /* ===== Neutral Palette ===== */
    --black:        #000000;  /* page background */
    --white:        #ffffff;  /* primary text */
    --white-90:     rgba(255, 255, 255, 0.90);
    --white-70:     rgba(255, 255, 255, 0.70);  /* default muted text */
    --white-60:     rgba(255, 255, 255, 0.60);
    --white-50:     rgba(255, 255, 255, 0.50);  /* faint text */
    --white-30:     rgba(255, 255, 255, 0.30);  /* disabled/divider */
    --white-10:     rgba(255, 255, 255, 0.10);  /* faint border */
    --white-05:     rgba(255, 255, 255, 0.05);  /* faint background */

    --black-95:     rgba(0, 0, 0, 0.95);
    --black-90:     rgba(0, 0, 0, 0.90);  /* nav background */
    --black-70:     rgba(0, 0, 0, 0.70);
    --black-60:     rgba(0, 0, 0, 0.60);
    --black-40:     rgba(0, 0, 0, 0.40);
    --black-20:     rgba(0, 0, 0, 0.20);

    /* ===== Phase color assignments (matches Phase card borders) =====
     * Phase I  → green (initialization, bright start)
     * Phase II → cyan (deep focus)
     * Phase III → yellow (overclock, energy)
     * Phase IV → pink (glitch, instability)
     * Phase V → purple (system restore, mythic end)
     */
    --phase-1: var(--neon-green);
    --phase-2: var(--neon-cyan);
    --phase-3: var(--neon-yellow);
    --phase-4: var(--neon-pink);
    --phase-5: var(--neon-purple);

    /* ===== Typography ===== */
    --font-orbitron:  "Orbitron", system-ui, sans-serif;          /* display headlines */
    --font-mono:      "JetBrains Mono", ui-monospace, monospace;  /* body, code, labels */
    --font-sans:      "Inter", ui-sans-serif, system-ui, sans-serif;  /* long-form text */

    /* Font sizes (from production HTML classes) */
    --text-7px:   7px;
    --text-8px:   8px;
    --text-9px:   9px;
    --text-10px:  10px;
    --text-xs:    0.75rem;   /* 12px */
    --text-sm:    0.875rem;  /* 14px */
    --text-base:  1rem;      /* 16px */
    --text-lg:    1.125rem;  /* 18px */
    --text-2xl:   1.5rem;    /* 24px */
    --text-3xl:   1.875rem;  /* 30px */
    --text-5xl:   3rem;      /* 48px */
    --text-7xl:   4.5rem;    /* 72px (hero) */
    --text-9xl:   9rem;      /* 144px (massive display) */

    /* Letter spacing (production uses these widely) */
    --tracking-tight:    -0.025em;
    --tracking-normal:   0;
    --tracking-widest:    0.1em;   /* default for nav/labels */
    --tracking-mega:      0.3em;   /* for SIGNAL_ACTIVE-style */

    /* ===== Layout ===== */
    --container-max:  64rem;       /* 1024px — matches max-w-5xl */
    --container-md:   48rem;       /* 768px — matches max-w-3xl */
    --container-sm:   42rem;       /* 672px — matches max-w-2xl */
    --nav-height:     3.5rem;      /* 56px — h-14 */

    /* Spacing scale (Tailwind defaults used in production) */
    --space-1:   0.25rem;
    --space-2:   0.5rem;
    --space-3:   0.75rem;
    --space-4:   1rem;
    --space-6:   1.5rem;
    --space-8:   2rem;
    --space-12:  3rem;
    --space-16:  4rem;
    --space-20:  5rem;

    /* Border radius */
    --radius-sm:  0.25rem;
    --radius-md:  0.5rem;
    --radius-lg:  0.75rem;   /* default card radius */
    --radius-xl:  1rem;      /* hero card radius */
    --radius-2xl: 1.5rem;

    /* Borders */
    --border-thin:    1px;
    --border-medium:  2px;
    --border-thick:   4px;

    /* ===== Glows / Effects ===== */
    --glow-cyan:   0 0 8px #00f0ff, 0 0 20px #00f0ff, 0 0 40px rgba(0, 240, 255, 0.6);
    --glow-green:  0 0 8px #00ff9f, 0 0 20px #00ff9f, 0 0 40px rgba(0, 255, 159, 0.6);
    --glow-pink:   0 0 8px #ff00aa, 0 0 20px #ff00aa, 0 0 40px rgba(255, 0, 170, 0.6);
    --glow-purple: 0 0 8px #9d00ff, 0 0 20px #9d00ff, 0 0 40px rgba(157, 0, 255, 0.6);

    /* Hero title gradient: cyan → green → cyan → purple (135deg) */
    --gradient-hero: linear-gradient(135deg,
        #00f0ff 0%,
        #00ff9f 40%,
        #00f0ff 80%,
        #9d00ff 100%);

    /* CTA gradient (used on pink "STREAM NOW" buttons): pink → purple */
    --gradient-cta: linear-gradient(135deg,
        #ff00aa 0%,
        #9d00ff 100%);

    /* Background grid pattern: 40px squares with cyan 7% lines */
    --pattern-grid: linear-gradient(rgba(0, 240, 255, 0.07) 1px, transparent 0),
                    linear-gradient(90deg, rgba(0, 240, 255, 0.07) 1px, transparent 0);
    --pattern-grid-size: 40px 40px;

    /* Scanline overlay (0.015 alpha, 4px spacing, top-to-bottom) */
    --pattern-scanlines: repeating-linear-gradient(0deg,
        transparent,
        transparent 2px,
        rgba(0, 255, 159, 0.015) 0,
        rgba(0, 255, 159, 0.015) 4px);

    /* ===== Z-index scale ===== */
    --z-base:        1;
    --z-fixed:      10;
    --z-nav:        50;
    --z-modal:      100;
    --z-scanlines:  1000;  /* full-page overlay */
}

/* === Defaults (apply via :root) === */
html, body {
    background-color: var(--black);
    color: var(--white);
    font-family: var(--font-sans);
    overflow-x: hidden;
}

/* Headlines use Orbitron */
h1, h2, h3, h4, h5, h6,
.font-orbitron, [class*="font-orbitron"] {
    font-family: var(--font-orbitron);
    letter-spacing: var(--tracking-tight);
}

/* Mono labels and nav */
.font-mono, [class*="font-mono"], nav a {
    font-family: var(--font-mono);
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    font-size: var(--text-xs);
}

/* Helper classes for non-Tailwind use (e.g. landing-page.py template) */
.archonode-card {
    background: var(--black-90);
    border: var(--border-thin) solid var(--white-10);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    color: var(--white);
    transition: border-color 200ms ease, box-shadow 200ms ease;
}
.archonode-card:hover {
    border-color: var(--neon-cyan);
    box-shadow: 0 0 30px rgba(0, 240, 255, 0.15);
}

.archonode-text-gradient {
    background: var(--gradient-hero);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.archonode-btn-neon {
    background: var(--gradient-cta);
    color: var(--white);
    font-family: var(--font-mono);
    font-weight: 700;
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    padding: var(--space-4) var(--space-6);
    border: none;
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: transform 200ms ease, box-shadow 200ms ease;
    box-shadow: 0 0 25px rgba(255, 0, 170, 0.6), 0 0 50px rgba(255, 0, 170, 0.3);
}
.archonode-btn-neon:hover {
    transform: scale(1.05);
    box-shadow: 0 0 35px rgba(255, 0, 170, 0.9), 0 0 70px rgba(255, 0, 170, 0.5);
}