/**
 * AlertOwl — Design Tokens (Canonical Source of Truth)
 * Version: 1.0 (UX Redesign v1, Stage 01)
 *
 * THIS FILE IS THE SINGLE SOURCE OF TRUTH FOR ALL DESIGN TOKENS.
 *
 * Every other CSS file in this repo consumes variables defined here.
 * Do NOT add :root blocks to any other CSS file.
 *
 * NAMING CONVENTIONS
 *   Canonical names (use these in new code):
 *     --bg, --surface, --muted            backgrounds
 *     --text, --text-sec, --text-muted    foreground text
 *     --accent, --accent-soft,            brand teal + tints
 *       --accent-text, --accent-dim
 *     --border, --border-strong           hairlines
 *     --critical, --high, --medium, --low priority semantic
 *     --danger, --info, --success         status semantic
 *     --radius, --radius-sm, --radius-lg  corner radii
 *     --font, --mono                      font stacks
 *
 *   Legacy aliases (preserved during UX Redesign v1 migration):
 *     --bg-primary, --bg-secondary, --bg-tertiary, --bg-hover
 *     --text-primary, --text-secondary
 *     --accent-teal, --accent-teal-dim, --accent-red,
 *       --accent-orange, --accent-yellow, --accent-green
 *     --card, --inner, --border-light, --accent-dark
 *     --accent-blue, --accent-purple
 *     --shadow, --whitespace
 *     --font-mono (admin.css compatibility)
 *
 *   Legacy aliases will be removed in Stage 06 cleanup once all
 *   consumer files have been migrated to canonical names.
 *
 * ISLAND PAGES (NOT CONSUMERS OF THIS FILE):
 *   - legal.html defines its own :root inline (--teal, --navy, --slate,
 *     --white, --font-body, --font-display) and will be rethemed later.
 *   - landing.css is a separate marketing stylesheet with hardcoded
 *     dark-indigo palette (#0c1128) and references --card-accent which
 *     is not defined anywhere (pre-existing silent bug; the hover
 *     accent bar renders without color).
 *   - connect-gmail.html uses self-contained inline styles with its
 *     own undefined variables (--info-bg, --success-bg, --warning-bg,
 *     etc.) that fall back to transparent (pre-existing silent bug).
 *   These three are deferred to a future sprint and intentionally not
 *   aliased here to keep the canonical surface minimal.
 *
 * CURRENT THEME: dark (matches production v0.8.x exactly)
 *   Stage 02 introduces the [data-theme="light"] override block.
 *   This stage is a pure refactor — zero visual change expected.
 */

:root {
    /* ────────────────────────────────────────────────────
       CANONICAL TOKENS — use these in all new/refactored code
       ──────────────────────────────────────────────────── */

    /* Backgrounds */
    --bg: #0a0a0b;
    --surface: #141417;
    --muted: #1c1c21;
    --bg-hover: #252529;

    /* Foreground text */
    --text: #fafafa;
    --text-sec: #a1a1aa;
    --text-muted: #71717a;

    /* Brand accent (teal) */
    --accent: #14b8a6;
    --accent-soft: rgba(20, 184, 166, 0.12);
    --accent-text: #5eead4;
    --accent-dim: #0d9488;

    /* Borders */
    --border: #27272a;
    --border-strong: #3f3f46;

    /* Priority semantic */
    --critical: #ef4444;
    --high: #f97316;
    --medium: #eab308;
    --low: #22c55e;

    /* Status semantic */
    --danger: #ef4444;
    --info: #3b82f6;
    --success: #22c55e;
    --warning: #eab308;

    /* Integration accent (WhatsApp green — kept for brand consistency) */
    --whatsapp: #25D366;

    /* Admin tool accents */
    --admin-blue: #3b82f6;
    --admin-purple: #a78bfa;

    /* Corners — dashboard canonical (10/6/4). Auth pages override to 12/8
       inside css/auth.css at body scope during Stage 01 migration; they
       converge to 10/6 canonical in Stage 06 when auth pages retheme. */
    --radius: 10px;
    --radius-sm: 6px;
    --radius-xs: 4px;
    --radius-lg: 14px;

    /* Elevation */
    --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);

    /* Typography */
    --font: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    --mono: 'JetBrains Mono', 'Fira Code', 'SF Mono', monospace;


    /* ────────────────────────────────────────────────────
       LEGACY ALIASES — will be removed in Stage 06 cleanup.
       DO NOT USE THESE IN NEW CODE. They exist only so that
       existing references in auth.css / dashboard.css /
       admin.css / responsive.css / landing.css resolve
       correctly until they're migrated.
       ──────────────────────────────────────────────────── */

    /* auth.css naming (--*-primary / --*-secondary / --*-tertiary) */
    --bg-primary: var(--bg);
    --bg-secondary: var(--surface);
    --bg-tertiary: var(--muted);
    --text-primary: var(--text);
    --text-secondary: var(--text-sec);

    /* auth.css accent names */
    --accent-teal: var(--accent);
    --accent-teal-dim: var(--accent-dim);
    --accent-red: var(--danger);
    --accent-orange: var(--high);
    --accent-yellow: var(--medium);
    --accent-green: var(--success);

    /* dashboard.css naming (--card / --inner / --accent-dark / --border-light) */
    --card: var(--surface);
    --inner: var(--muted);
    --accent-dark: var(--accent-dim);
    --border-light: var(--border-strong);

    /* admin.js / ops-b5825f18.html / connect-gmail.html naming
       (--bg-card / --bg-inner) — previously undefined, fallback
       values were used. Aliasing here fixes the silent visual
       bug on admin ops page buttons. */
    --bg-card: var(--surface);
    --bg-inner: var(--muted);

    /* admin.css naming */
    --accent-blue: var(--admin-blue);
    --accent-purple: var(--admin-purple);
    --font-mono: var(--mono);
}

/* ═══════════════════════════════════════════════════════════════════
   LIGHT THEME OVERRIDES (Stage 02 of UX Redesign v1)
   ═══════════════════════════════════════════════════════════════════
   The :root block above defines the DARK theme as the baseline
   (current production). When <html data-theme="light">, we override
   the surface + text + border + accent tokens below. Radius, font,
   priority semantics, and other tokens stay constant across modes.

   Color choices:
     - Light surfaces: #fcfcfc bg, #ffffff cards — clean, not stark
     - Teal accent darkens to #0d9488 for contrast on white
     - Priority colors use 700/800 stops for AA contrast on light
   ═══════════════════════════════════════════════════════════════════ */

html[data-theme="light"] {
    --bg: #fcfcfc;
    --surface: #ffffff;
    --muted: #f6f7f9;
    --bg-hover: #f1f5f9;

    --text: #0f172a;
    --text-sec: #475569;
    --text-muted: #94a3b8;

    --accent: #0d9488;
    --accent-soft: #ccfbf1;
    --accent-text: #0f766e;
    --accent-dim: #0f766e;

    --border: #e8ecf0;
    --border-strong: #cbd5e1;

    --critical: #b91c1c;
    --high: #9a3412;
    --medium: #854d0e;
    --low: #166534;

    --danger: #dc2626;
    --info: #1d4ed8;
    --success: #15803d;
    --warning: #b45309;

    --shadow: 0 1px 3px 0 rgba(15, 23, 42, 0.04), 0 1px 2px -1px rgba(15, 23, 42, 0.04);
}


/* ═══════════════════════════════════════════════════════════════════
   DARK THEME — NAVY VARIANT (Stage 02)
   ═══════════════════════════════════════════════════════════════════
   When the user explicitly picks "dark" via the toggle, serve the
   navy-tinted dark (#0b0f1e family) instead of the current pitch
   black (#0a0a0b). This matches the landing page's #0c1128 palette
   so the whole product feels cohesive — marketing site and app
   share a visual family instead of clashing.

   The existing dark values remain the :root baseline so any page
   WITHOUT a data-theme attribute (shouldn't happen after Stage 02,
   but defensive) still renders the pre-redesign look.
   ═══════════════════════════════════════════════════════════════════ */

html[data-theme="dark"] {
    --bg: #0b0f1e;
    --surface: #131a2e;
    --muted: #1a2240;
    --bg-hover: #222b4c;

    --text: #e6e8ef;
    --text-sec: #a5abc4;
    --text-muted: #6b7395;

    --accent: #2dd4bf;
    --accent-soft: rgba(45, 212, 191, 0.15);
    --accent-text: #5eead4;
    --accent-dim: #14b8a6;

    --border: #242d4d;
    --border-strong: #334167;
}


/* ═══════════════════════════════════════════════════════════════════
   SYSTEM THEME (Stage 02 default)
   ═══════════════════════════════════════════════════════════════════
   When data-theme="system", follow the user's OS preference:
     - OS in light mode  → light theme
     - OS in dark mode   → navy dark theme
     - No preference set → baseline :root (current dark)

   The toggle in Settings has three options: Light / Dark / System.
   ═══════════════════════════════════════════════════════════════════ */

@media (prefers-color-scheme: light) {
    html[data-theme="system"] {
        --bg: #fcfcfc;
        --surface: #ffffff;
        --muted: #f6f7f9;
        --bg-hover: #f1f5f9;

        --text: #0f172a;
        --text-sec: #475569;
        --text-muted: #94a3b8;

        --accent: #0d9488;
        --accent-soft: #ccfbf1;
        --accent-text: #0f766e;
        --accent-dim: #0f766e;

        --border: #e8ecf0;
        --border-strong: #cbd5e1;

        --critical: #b91c1c;
        --high: #9a3412;
        --medium: #854d0e;
        --low: #166534;

        --danger: #dc2626;
        --info: #1d4ed8;
        --success: #15803d;
        --warning: #b45309;

        --shadow: 0 1px 3px 0 rgba(15, 23, 42, 0.04), 0 1px 2px -1px rgba(15, 23, 42, 0.04);
    }
}

@media (prefers-color-scheme: dark) {
    html[data-theme="system"] {
        --bg: #0b0f1e;
        --surface: #131a2e;
        --muted: #1a2240;
        --bg-hover: #222b4c;

        --text: #e6e8ef;
        --text-sec: #a5abc4;
        --text-muted: #6b7395;

        --accent: #2dd4bf;
        --accent-soft: rgba(45, 212, 191, 0.15);
        --accent-text: #5eead4;
        --accent-dim: #14b8a6;

        --border: #242d4d;
        --border-strong: #334167;
    }
}