/* =========================================================
   Intuo Design System — Canonical Token Set + Component Classes
   ========================================================= */

:root {
    /* Background tokens */
    --intuo-bg: #0A0A0B;
    --intuo-bg-surface: #1C1C1E;
    --intuo-bg-surface-hover: #222226;
    --intuo-bg-elevated: #1A1A1E;
    --intuo-bg-overlay: #222228;
    --intuo-bg-rail: #111113;

    /* Text tokens */
    --intuo-text: #FAFAFA;
    --intuo-text-2: #D4D4D8;
    --intuo-text-3: #A0A0AB;
    --intuo-text-4: #9CA3AF;
    --intuo-text-5: #52525B;

    /* Accent tokens */
    --intuo-accent: #7C3AED;
    --intuo-accent-h: #6D28D9;
    --intuo-accent-subtle: #2E1065;
    --intuo-a8: rgba(124, 58, 237, 0.10);
    --intuo-a12: rgba(124, 58, 237, 0.15);
    --intuo-a-border: rgba(124, 58, 237, 0.4);

    /* Border tokens */
    --intuo-border: #27272A;
    --intuo-border-2: #1E1E22;
    --intuo-border-strong: #3F3F46;

    /* Status tokens */
    --intuo-green: #22C55E;
    --intuo-g8: rgba(34, 197, 94, 0.10);
    --intuo-red: #EF4444;
    --intuo-r8: rgba(239, 68, 68, 0.10);
    --intuo-sky: #3B82F6;
    --intuo-s8: rgba(14, 165, 233, 0.10);
    --intuo-violet: #8b5cf6;
    --intuo-v8: rgba(139, 92, 246, 0.10);
    --intuo-amber: #F59E0B;
    --intuo-am8: rgba(245, 158, 11, 0.10);

    /* Content type tokens */
    --intuo-content-authority: #3B82F6;
    --intuo-content-personal: #D97706;
    --intuo-content-sales: #7C3AED;

    /* Type scale */
    --intuo-text-xs: 0.75rem;
    --intuo-text-sm: 0.875rem;
    --intuo-text-base: 1rem;
    --intuo-text-lg: 1.125rem;
    --intuo-text-xl: 1.25rem;
    --intuo-text-2xl: 1.5rem;
    --intuo-text-3xl: 2rem;
    --intuo-text-4xl: 2.5rem;

    /* Spacing */
    --intuo-space-1: 0.25rem;
    --intuo-space-2: 0.5rem;
    --intuo-space-4: 1rem;
    --intuo-space-6: 1.5rem;
    --intuo-space-8: 2rem;
    --intuo-space-12: 3rem;
    --intuo-space-16: 4rem;
    --intuo-space-20: 5rem;

    /* Elevation */
    --intuo-shadow-subtle: 0 1px 2px rgba(0,0,0,0.08);
    --intuo-shadow-low: 0 4px 6px -1px rgba(0,0,0,0.15);
    --intuo-shadow-mid: 0 10px 15px -3px rgba(0,0,0,0.2);
    --intuo-shadow-high: 0 25px 50px -12px rgba(0,0,0,0.5);

    /* Radii */
    --intuo-r-xs: 4px;
    --intuo-r-sm: 6px;
    --intuo-r-md: 8px;
    --intuo-r-lg: 12px;

    /* Existing shadows */
    --intuo-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
    --intuo-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);

    /* White */
    --intuo-white: #ffffff;
    --intuo-black: #000000;

    /* LinkedIn brand */
    --intuo-linkedin: #0A66C2;
    --intuo-linkedin-dark: #004182;
    --intuo-linkedin-light: #378FE9;

    /* Brand / Focus Flow primary */
    --intuo-brand: #E05D36;
    --intuo-brand-dark: #C74D2C;
    --intuo-brand-light: #E16745;
    --intuo-brand-50: #FFF8F5;
    --intuo-brand-100: #FDDDD3;
    --intuo-brand-tint: #FFF7F5;

    /* Extended status — green */
    --intuo-green-400: #34D399;
    --intuo-green-500: #10B981;
    --intuo-green-600: #16A34A;
    --intuo-green-700: #15803D;
    --intuo-green-300: #86EFAC;

    /* Extended status — red */
    --intuo-red-300: #FCA5A5;
    --intuo-red-400: #F87171;
    --intuo-red-600: #DC2626;

    /* Extended status — blue */
    --intuo-blue-300: #93C5FD;
    --intuo-blue-400: #60A5FA;

    /* Extended status — violet */
    --intuo-violet-300: #C4B5FD;
    --intuo-violet-400: #A78BFA;
    --intuo-violet-100: #EDE9FE;

    /* Extended status — amber */
    --intuo-amber-300: #FCD34D;
    --intuo-amber-400: #FBBF24;
    --intuo-amber-700: #B45309;

    /* Extended status — other */
    --intuo-cyan: #22D3EE;
    --intuo-orange-400: #FB923C;
    --intuo-indigo-300: #A5B4FC;
    --intuo-indigo-600: #6366F1;

    /* Neutral dark surfaces */
    --intuo-gray-800: #1F2937;
    --intuo-gray-900: #1A1A2E;
    --intuo-slate-800: #1E293B;
    --intuo-slate-700: #334155;
    --intuo-slate-600: #475569;
    --intuo-gray-700: #374151;
    --intuo-gray-600: #6B7280;
    --intuo-gray-500: #71717A;

    /* Neutral light (marketing / onboarding / light-theme contexts) */
    --intuo-gray-300: #D1D5DB;
    --intuo-gray-200: #E5E7EB;
    --intuo-gray-100: #F1F1F1;
    --intuo-gray-50: #F9FAFB;
    --intuo-border-light: #E0E0E0;
    --intuo-border-light-2: #F0F0F0;
    --intuo-stone-300: #D6D3D1;
    --intuo-slate-100: #F1F5F9;

    /* Scrollbar grays */
    --intuo-scrollbar-track: #F1F1F1;
    --intuo-scrollbar-thumb: #C1C1C1;
    --intuo-scrollbar-thumb-h: #A1A1A1;

    /* Interest chip palettes (light bg + dark text pairs) */
    --intuo-chip-purple-bg: #F3E8FF;
    --intuo-chip-purple-text: #6B21A8;
    --intuo-chip-indigo-bg: #E0E7FF;
    --intuo-chip-indigo-text: #3730A3;
    --intuo-chip-cyan-bg: #CFFAFE;
    --intuo-chip-cyan-text: #155E75;
    --intuo-chip-orange-bg: #FFEDD5;
    --intuo-chip-orange-text: #9A3412;
    --intuo-chip-pink-bg: #FCE7F3;
    --intuo-chip-pink-text: #9D174D;
    --intuo-chip-emerald-bg: #D1FAE5;
    --intuo-chip-emerald-text: #065F46;
    --intuo-chip-amber-bg: #FEF3C7;
    --intuo-chip-amber-text: #92400E;
    --intuo-chip-slate-bg: #E2E8F0;
    --intuo-chip-slate-text: #334155;

    /* Focus Flow scoped tokens */
    --intuo-ff-border: #3A3A3F;
    --intuo-ff-bg-dark: #0D0D10;
    --intuo-ff-border-dark: #1F2023;

    /* Dark surface variants (onboarding / billing) */
    --intuo-surface-1: #141416;
    --intuo-surface-2: #1F1F23;
    --intuo-surface-3: #2A2A2E;
    --intuo-surface-4: #222224;
    --intuo-surface-deep: #08080D;
    --intuo-surface-deep-2: #0D0D14;
    --intuo-surface-deep-3: #111118;
    --intuo-surface-deep-4: #1C1C2A;

    /* Purple extended */
    --intuo-purple-800: #5B21B6;
    --intuo-purple-900: #4C1D95;
    --intuo-purple-bg: #1E1040;
    --intuo-purple-200: #DDD6FE;
    --intuo-amber-200: #FDE68A;

    /* Slate extended (marketing/light) */
    --intuo-slate-400: #94A3B8;
    --intuo-slate-500: #64748B;
    --intuo-gray-600b: #4B5563;
    --intuo-slate-200: #E2E8F0;
    --intuo-slate-300: #CBD5E1;
    --intuo-slate-50: #F8FAFC;

    /* Success box (forgot/reset password) */
    --intuo-green-900: #052E16;
    --intuo-green-800: #166534;
    --intuo-green-400b: #4ADE80;
    --intuo-green-100: #DCFCE7;
    --intuo-red-100: #FDE8E8;

    /* Toast status */
    --intuo-toast-success: #16A34A;
    --intuo-toast-error: #DC2626;
    --intuo-toast-info: #1F2937;

    /* Nudge banner (warm/amber light theme) */
    --intuo-nudge-bg: #FFFBEB;
    --intuo-nudge-text: #92400E;
    --intuo-nudge-text-body: #78350F;
    --intuo-nudge-dismiss: #B45309;

    /* Light text (toast/notification light theme) */
    --intuo-text-dark: #1A1A1A;
    --intuo-text-dark-2: #6B6B6B;
    --intuo-text-dark-3: #999999;
    --intuo-text-dark-4: #666666;

    /* Notification status backgrounds (light theme) */
    --intuo-notify-success-bg: #F0FDF4;
    --intuo-notify-error-bg: #FEF2F2;

    /* Orange extended (LinkedIn status banners in JS) */
    --intuo-orange-50: #FFF7ED;
    --intuo-orange-200: #FED7AA;
    --intuo-orange-600: #EA580C;
    --intuo-orange-700: #C2410C;
    --intuo-orange-900: #7C2D12;

    /* Sky extended (LinkedIn connected banner in JS) */
    --intuo-sky-50: #F0F9FF;
    --intuo-sky-200: #BAE6FD;
    --intuo-sky-700: #0369A1;
    --intuo-sky-900: #0C4A6E;

    /* Typography */
    --intuo-font-h: 'Outfit', system-ui, sans-serif;
    --intuo-font-b: 'Inter', system-ui, sans-serif;
    --intuo-font-btn: 'Sora', system-ui, sans-serif;
    --intuo-font-mono: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace;
    --intuo-font-system: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    --intuo-ease: cubic-bezier(0.16, 1, 0.3, 1);

    /* Audit page colors */
    --intuo-red-900: #7F1D1D;
    --intuo-audit-bg: #1F0A0A;
    --intuo-green-900b: #14532D;

    /* Token aliases for backward compatibility */
    --intuo-bg-alt: var(--intuo-bg-elevated);
    --intuo-bg-primary: var(--intuo-bg);
    --intuo-text-1: var(--intuo-text);
}

/* Screen-reader-only utility */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Button component classes are in design-system-buttons.css */