/*
   Aimavrik Design Tokens — tokens.css
   Extracted from style.css at Sprint 13A (convergence sweep C4, ADR-0005).
   The single source of truth for the design token contract: surfaces, text,
   lines, accent, ambient, buttons, radii, effects — in both themes.

   Load order: link this file BEFORE style.css (and before shell.css and any
   experience CSS) on every page, so every downstream stylesheet resolves its
   var() references against these tokens. Behaviour is unchanged from the
   in-style.css tokens it replaces — values are byte-identical; only their home
   moved. Authority World (/learn) builds on this contract from day one.
*/

:root {
    --font-sans: 'Inter', sans-serif;
    color-scheme: light;

    /* Surfaces */
    --bg-page: #FBFBFD;
    --bg-elevated: #FFFFFF;
    --bg-surface: #FFFFFF;
    --surface-glass: rgba(255, 255, 255, 0.65);
    --surface-panel: rgba(255, 255, 255, 0.55);
    --surface-hover: rgba(255, 255, 255, 0.92);
    --nav-bg: rgba(251, 251, 253, 0.72);
    --input-bg: rgba(255, 255, 255, 0.9);
    --input-bg-focus: #FFFFFF;

    /* Text */
    --text-primary: #0B0B10;
    --text-secondary: #4B5563;
    --text-muted: #6B7280;
    --white: #FFFFFF;

    /* Lines */
    --border: rgba(17, 24, 39, 0.10);
    --border-hover: rgba(17, 24, 39, 0.18);
    --border-hairline: rgba(17, 24, 39, 0.07);
    --grid-line: rgba(17, 24, 39, 0.03);

    /* Accent — violet → blue signature */
    --accent: #6D5EF7;
    --accent-2: #3B82F6;
    --accent-soft: rgba(109, 94, 247, 0.12);
    --accent-text: #5B4FE0;
    --gradient-accent: linear-gradient(120deg, #7C6CFF 0%, #3B82F6 100%);
    --gradient-text: linear-gradient(120deg, #6D5EF7 0%, #3B82F6 100%);

    /* Ambient glow / orbs */
    --aura-1: rgba(124, 108, 255, 0.20);
    --aura-2: rgba(59, 130, 246, 0.14);
    --orb-1: #E4E0FF;
    --orb-2: #E6EEFF;
    --orb-3: #F2F2F6;
    --orb-opacity: 0.3;
    --orb-blur: 80px;

    --success: #10B981;
    --danger: #EF4444;

    /* Primary button (theme-driven) */
    --btn-primary-bg: linear-gradient(180deg, #2A2A31 0%, #0B0B10 100%);
    --btn-primary-color: #FFFFFF;
    --btn-primary-border: rgba(0, 0, 0, 0.9);
    --btn-primary-glow: 0 1px 2px rgba(16, 24, 40, 0.2);
    --btn-primary-glow-hover: 0 8px 24px rgba(0, 0, 0, 0.16);

    /* Radii */
    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 20px;
    --radius-xl: 24px;

    /* Effects */
    --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.03);
    --shadow-md: 0 2px 4px rgba(16, 24, 40, 0.04), 0 6px 16px -4px rgba(16, 24, 40, 0.06);
    --shadow-lg: 0 4px 8px rgba(16, 24, 40, 0.04), 0 16px 32px -8px rgba(16, 24, 40, 0.10);
    --shadow-card: 0 1px 2px rgba(16, 24, 40, 0.03), 0 8px 24px -12px rgba(16, 24, 40, 0.08);
    --shadow-card-hover: 0 2px 4px rgba(16, 24, 40, 0.04), 0 20px 40px -12px rgba(16, 24, 40, 0.12);
    --backdrop-blur: 16px;
}

/* ============================= DARK THEME ============================= */
html[data-theme="dark"] {
    color-scheme: dark;

    --bg-page: #08080C;
    --bg-elevated: #121219;
    --bg-surface: #0E0E15;
    --surface-glass: rgba(255, 255, 255, 0.045);
    --surface-panel: rgba(255, 255, 255, 0.025);
    --surface-hover: rgba(255, 255, 255, 0.075);
    --nav-bg: rgba(10, 10, 16, 0.72);
    --input-bg: rgba(255, 255, 255, 0.04);
    --input-bg-focus: rgba(255, 255, 255, 0.07);

    --text-primary: #F4F4F7;
    --text-secondary: #A8A8B4;
    --text-muted: #7C7C89;
    --white: #FFFFFF;

    --border: rgba(255, 255, 255, 0.10);
    --border-hover: rgba(255, 255, 255, 0.22);
    --border-hairline: rgba(255, 255, 255, 0.07);
    --grid-line: rgba(255, 255, 255, 0.035);

    --accent: #8B7CFF;
    --accent-2: #4C93FF;
    --accent-soft: rgba(139, 124, 255, 0.16);
    --accent-text: #A99BFF;
    --gradient-accent: linear-gradient(120deg, #8B7CFF 0%, #4C93FF 100%);
    --gradient-text: linear-gradient(120deg, #B3A6FF 0%, #6BA6FF 100%);

    --aura-1: rgba(124, 108, 255, 0.30);
    --aura-2: rgba(56, 120, 255, 0.22);
    --orb-1: #3A2E86;
    --orb-2: #1D3070;
    --orb-3: #16161F;
    --orb-opacity: 0.5;
    --orb-blur: 100px;

    --btn-primary-bg: linear-gradient(120deg, #7C6CFF 0%, #3B82F6 100%);
    --btn-primary-color: #FFFFFF;
    --btn-primary-border: rgba(255, 255, 255, 0.16);
    --btn-primary-glow: 0 6px 22px -6px rgba(92, 76, 255, 0.5);
    --btn-primary-glow-hover: 0 10px 34px -6px rgba(92, 76, 255, 0.7);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6);
    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 32px -14px rgba(0, 0, 0, 0.7);
    --shadow-card-hover: 0 2px 6px rgba(0, 0, 0, 0.5), 0 26px 52px -16px rgba(0, 0, 0, 0.8);
}