/* ==========================================================================
   Symfony AI — Color tokens
   --------------------------------------------------------------------------
   The brand is anchored by Symfony violet (#5a55a5, the logo color) and a
   four-stop "brand spectrum" that the live site cycles through on a shared
   60s timeline (violet → deep purple → magenta → blue). Surfaces stay quiet
   and near-monochrome so the spectrum and code blocks carry the energy.
   Light is the default theme; [data-theme="dark"] flips the surface ramp.
   ========================================================================== */

:root {
    /* ---- Brand spectrum (the animated 4-stop gradient set) ---------------- */
    --sf-violet: #5a55a5; /* brand-1 — primary, the logo violet           */
    --sf-purple: #4c1d95; /* brand-2 — deep purple                        */
    --sf-magenta: #db2777; /* brand-3 — pink / magenta                     */
    --sf-blue: #1d4ed8; /* brand-4 — royal blue                         */
    --sf-accent: #7f5bff; /* bright electric violet — glows, dividers     */

    /* Numbered aliases matching the site's --sf-ai-brand-N for parity */
    --brand-1: var(--sf-violet);
    --brand-2: var(--sf-purple);
    --brand-3: var(--sf-magenta);
    --brand-4: var(--sf-blue);

    /* The signature 4-stop brand gradient (used on underlines, glows) */
    --gradient-brand: linear-gradient(90deg, var(--sf-violet), var(--sf-accent), var(--sf-magenta));
    --gradient-spectrum: linear-gradient(120deg, var(--sf-violet) 0%, var(--sf-purple) 33%, var(--sf-magenta) 66%, var(--sf-blue) 100%);

    /* ---- Violet tints (UI states, soft fills) ---------------------------- */
    --violet-50: #f1f0f9;
    --violet-100: #e3e1f2;
    --violet-200: #c5c1e4;
    --violet-300: #a39dd1;
    --violet-400: #807ab9;
    --violet-500: #5a55a5;
    --violet-600: #4a4690;
    --violet-700: #3b3873;
    --violet-800: #2c2a55;
    --violet-900: #1d1c38;

    /* ---- Neutral ramp (cool, slightly blue — oklch hue 261/264) ---------- */
    --neutral-0: #ffffff;
    --neutral-50: oklch(97.5% 0.003 264.531);
    --neutral-100: oklch(94.5% 0.005 264.531);
    --neutral-150: oklch(92.8% 0.006 264.531); /* the site's --bg-secondary  */
    --neutral-200: oklch(88% 0.008 264.531);
    --neutral-300: oklch(78% 0.01 264.531);
    --neutral-400: oklch(64% 0.012 264.531);
    --neutral-500: oklch(52% 0.014 264.531);
    --neutral-600: oklch(42% 0.016 264.531);
    --neutral-700: oklch(31% 0.018 264.531);
    --neutral-800: oklch(22% 0.022 261.692);
    --neutral-900: oklch(16% 0.026 261.692);
    --neutral-950: oklch(13% 0.028 261.692); /* near-black blue — dark bg    */

    /* ---- Code surface (terminals, code blocks) -------------------------- */
    --code-bg: #151028; /* deep indigo-black                          */
    --code-fg: oklch(87% 0 0);
    --code-variable: #79c0ff; /* $vars, numbers                             */
    --code-class: #d2a8ff; /* class & function titles                    */
    --code-keyword: #ff7b72; /* new, echo, foreach…                        */
    --code-string: #99cc99; /* strings                                    */
    --code-comment: #8b949e; /* comments                                   */
    --code-attr: #ffa657; /* attributes / params                        */

    /* ---- Semantic status ------------------------------------------------ */
    --success: #1ca574;
    --warning: #d97706;
    --danger: #dc2626;
    --info: var(--sf-blue);

    /* ================= Semantic aliases — LIGHT (default) ================= */
    --bg-page: var(--neutral-0);
    --bg-secondary: var(--neutral-150);
    --surface-card: #ffffff;
    --surface-sunken: var(--neutral-50);
    --surface-code: var(--code-bg);

    --text-strong: oklch(14.5% 0 0);
    --text-body: oklch(28% 0.01 264.531);
    --text-muted: oklch(50% 0.012 264.531);
    --text-on-brand: #ffffff;
    --text-on-code: var(--code-fg);

    --border-subtle: rgba(15, 23, 42, 0.06);
    --border-default: rgba(15, 23, 42, 0.12);
    --border-strong: rgba(15, 23, 42, 0.22);

    --link: oklch(54.6% 0.245 262.881);
    --link-hover: oklch(46% 0.245 262.881);
    --focus-ring: var(--sf-accent);

    /* Logo part fills (theme-aware) */
    --logo-icon: var(--sf-violet);
    --logo-emblem: #ffffff;
    --logo-text: var(--text-strong);
    --logo-ai: var(--sf-violet);
}

/* ====================== Semantic aliases — DARK ========================== */
[data-theme='dark'] {
    --bg-page: var(--neutral-950);
    --bg-secondary: oklch(20% 0.015 264.531);
    --surface-card: oklch(25% 0.02 261.692);
    --surface-sunken: oklch(17% 0.02 261.692);

    --text-strong: #ffffff;
    --text-body: oklch(88% 0.01 264.531);
    --text-muted: oklch(66% 0.012 264.531);

    --border-subtle: rgba(255, 255, 255, 0.1);
    --border-default: rgba(255, 255, 255, 0.16);
    --border-strong: rgba(255, 255, 255, 0.28);

    --link: oklch(70% 0.245 262.881);
    --link-hover: oklch(78% 0.245 262.881);

    --logo-text: #ffffff;
}