/* ==========================================================================
   AtListen Design System
   Based on the infinity loop gradient: Purple → Blue → Green
   ========================================================================== */

/* CSS Custom Properties (Design Tokens)
   ========================================================================== */
:root {
    /* Brand Colors - Extracted from Logo Gradient */
    --color-purple: #8B5CF6;
    --color-purple-dark: #7C3AED;
    --color-purple-light: #A78BFA;
    --color-blue: #3B82F6;
    --color-blue-dark: #2563EB;
    --color-blue-light: #60A5FA;
    --color-green: #10B981;
    --color-green-dark: #059669;
    --color-green-light: #34D399;
    --color-teal: #14B8A6;
    --color-cyan: #06B6D4;

    /* Feedback (error/danger) — AA-passing on white at normal text size, unlike raw #EF4444 (~3.76:1) */
    --color-danger: #DC2626;
    --color-danger-dark: #B91C1C;
    --color-danger-bg: #FEF2F2;

    /* Feedback (warning) — was copy-pasted as raw hex across several app pages; tokenized 2026-07-18 */
    --color-warning: #F97316;
    --color-warning-dark: #C2410C;
    --color-warning-bg: #FFF7ED;

    /* Gradient Definitions */
    --gradient-brand: linear-gradient(135deg, var(--color-purple) 0%, var(--color-blue) 50%, var(--color-green) 100%);
    --gradient-brand-horizontal: linear-gradient(90deg, var(--color-purple) 0%, var(--color-blue) 50%, var(--color-green) 100%);
    --gradient-subtle: linear-gradient(135deg, rgba(139, 92, 246, 0.08) 0%, rgba(59, 130, 246, 0.08) 50%, rgba(16, 185, 129, 0.08) 100%);
    --gradient-hero: linear-gradient(180deg, rgba(139, 92, 246, 0.03) 0%, rgba(59, 130, 246, 0.03) 50%, rgba(16, 185, 129, 0.03) 100%);
    
    /* Neutral Colors */
    --color-white: #FFFFFF;
    --color-gray-50: #FAFAFA;
    --color-gray-100: #F5F5F5;
    --color-gray-200: #E5E5E5;
    --color-gray-300: #D4D4D4;
    --color-gray-400: #A3A3A3;
    --color-gray-500: #737373;
    --color-gray-600: #525252;
    --color-gray-700: #404040;
    --color-gray-800: #262626;
    --color-gray-900: #171717;
    --color-charcoal: #1A1A1A;
    --color-black: #000000;
    
    /* Semantic Colors */
    --color-text-primary: var(--color-gray-900);
    --color-text-secondary: var(--color-gray-600);
    --color-text-tertiary: var(--color-gray-500);
    --color-text-light: var(--color-gray-400);
    --color-text-white: var(--color-white);
    --color-text-inverse: var(--color-white);
    
    --color-bg-primary: var(--color-white);
    --color-bg-secondary: var(--color-gray-50);
    --color-bg-tertiary: var(--color-gray-100);
    
    /* Spacing Scale (8px base) */
    --space-1: 0.25rem;   /* 4px */
    --space-2: 0.5rem;    /* 8px */
    --space-3: 0.75rem;   /* 12px */
    --space-4: 1rem;      /* 16px */
    --space-5: 1.25rem;   /* 20px */
    --space-6: 1.5rem;    /* 24px */
    --space-8: 2rem;      /* 32px */
    --space-10: 2.5rem;   /* 40px */
    --space-12: 3rem;     /* 48px */
    --space-16: 4rem;     /* 64px */
    --space-20: 5rem;     /* 80px */
    --space-24: 6rem;     /* 96px */
    --space-32: 8rem;     /* 128px */
    --space-40: 10rem;    /* 160px */
    
    /* Typography Scale */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    
    --text-xs: 0.75rem;    /* 12px */
    --text-sm: 0.875rem;   /* 14px */
    --text-base: 1rem;     /* 16px */
    --text-lg: 1.125rem;   /* 18px */
    --text-xl: 1.25rem;    /* 20px */
    --text-2xl: 1.5rem;    /* 24px */
    --text-3xl: 1.875rem;  /* 30px */
    --text-4xl: 2.25rem;   /* 36px */
    --text-5xl: 3rem;      /* 48px */
    --text-6xl: 3.75rem;   /* 60px */
    --text-7xl: 4.5rem;    /* 72px */
    --text-8xl: 6rem;      /* 96px */
    
    --leading-none: 1;
    --leading-tight: 1.25;
    --leading-snug: 1.375;
    --leading-normal: 1.5;
    --leading-relaxed: 1.625;
    --leading-loose: 2;
    
    --font-light: 300;
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    
    /* Border Radius */
    --radius-sm: 0.25rem;   /* 4px */
    --radius-md: 0.375rem;  /* 6px */
    --radius-lg: 0.5rem;    /* 8px */
    --radius-xl: 0.75rem;   /* 12px */
    --radius-2xl: 1rem;     /* 16px */
    --radius-3xl: 1.5rem;   /* 24px */
    --radius-full: 9999px;
    
    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05);
    --shadow-brand: 0 4px 20px -2px rgba(139, 92, 246, 0.3);
    
    /* Animation Timing */
    --duration-instant: 50ms;
    --duration-fast: 150ms;
    --duration-normal: 250ms;
    --duration-slow: 350ms;
    --duration-slower: 500ms;
    --duration-slowest: 700ms;
    
    --ease-linear: linear;
    --ease-in: cubic-bezier(0.4, 0, 1, 1);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-smooth: cubic-bezier(0.25, 0.1, 0.25, 1);
    --ease-apple: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    
    /* Z-Index Scale */
    --z-base: 0;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 300;
    --z-modal-backdrop: 400;
    --z-modal: 500;
    --z-popover: 600;
    --z-tooltip: 700;
    --z-toast: 800;
    --z-max: 9999;
    
    /* Layout */
    --container-max: 1280px;
    --container-narrow: 960px;
    --container-wide: 1440px;
    
    /* Navigation */
    --nav-height: 100px;
    --nav-height-scrolled: 88px;
}

/* Reset & Base Styles
   ========================================================================== */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* AtListen-themed scrollbar (brand-gradient thumb), applied site-wide. Element-scoped
   scrollbar rules (e.g. study.html's chat panels) are more specific and still win. */
* {
    scrollbar-width: thin;                               /* Firefox */
    scrollbar-color: var(--color-purple) transparent;   /* Firefox: thumb, track (no gradient support) */
}

::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--gradient-brand);
    background-clip: content-box;
    border: 3px solid transparent;   /* transparent inset makes the thumb a slim rounded pill */
    border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
    border-width: 2px;               /* fatten slightly on hover for feedback */
}

::-webkit-scrollbar-corner {
    background: transparent;
}

/* AtListen infinity loader — the single loading animation used everywhere. A brand-
   gradient segment travels around the infinity mark. Markup: <div class="atl-loader">
   wrapping an inline SVG with .atl-loader-track + .atl-loader-worm paths and the
   #atlLoaderGrad gradient (see any loading screen for the canonical snippet). */
.atl-loader {
    display: inline-block;
    width: 76px;
    height: 38px;
    line-height: 0;
}

.atl-loader svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.atl-loader-track {
    fill: none;
    stroke: rgba(139, 92, 246, 0.18);
    stroke-width: 6;
    stroke-linecap: round;
}

.atl-loader-worm {
    fill: none;
    stroke: url(#atlLoaderGrad);
    stroke-width: 6;
    stroke-linecap: round;
    stroke-dasharray: 22 78;
    animation: atlLoaderTravel 1.4s linear infinite;
}

@keyframes atlLoaderTravel {
    to { stroke-dashoffset: -100; }
}

.atl-loader-sm {
    width: 46px;
    height: 23px;
}

/* White variant — for loaders sitting on a brand-gradient/dark button or surface. */
.atl-loader-light .atl-loader-track {
    stroke: rgba(255, 255, 255, 0.35);
}

.atl-loader-light .atl-loader-worm {
    stroke: #fff;
}

@media (prefers-reduced-motion: reduce) {
    .atl-loader-worm { animation-duration: 3s; }
}

body {
    font-family: var(--font-sans);
    font-size: var(--text-base);
    font-weight: var(--font-normal);
    line-height: var(--leading-normal);
    color: var(--color-text-primary);
    background-color: var(--color-bg-primary);
    overflow-x: hidden;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
    transition: color var(--duration-fast) var(--ease-out);
}

button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
}

ul, ol {
    list-style: none;
}

input, textarea, select {
    font-family: inherit;
    font-size: inherit;
}

/* Focus Styles (Accessibility) */
:focus-visible {
    outline: 2px solid var(--color-purple);
    outline-offset: 2px;
}

/* Selection */
::selection {
    background: rgba(139, 92, 246, 0.2);
    color: var(--color-purple-dark);
}

/* Utility Classes
   ========================================================================== */

/* Typography */
.text-xs { font-size: var(--text-xs); }
.text-sm { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-lg { font-size: var(--text-lg); }
.text-xl { font-size: var(--text-xl); }
.text-2xl { font-size: var(--text-2xl); }
.text-3xl { font-size: var(--text-3xl); }
.text-4xl { font-size: var(--text-4xl); }
.text-5xl { font-size: var(--text-5xl); }
.text-6xl { font-size: var(--text-6xl); }

.font-light { font-weight: var(--font-light); }
.font-normal { font-weight: var(--font-normal); }
.font-medium { font-weight: var(--font-medium); }
.font-semibold { font-weight: var(--font-semibold); }
.font-bold { font-weight: var(--font-bold); }

.leading-none { line-height: var(--leading-none); }
.leading-tight { line-height: var(--leading-tight); }
.leading-snug { line-height: var(--leading-snug); }
.leading-normal { line-height: var(--leading-normal); }
.leading-relaxed { line-height: var(--leading-relaxed); }

/* Text Colors */
.text-primary { color: var(--color-text-primary); }
.text-secondary { color: var(--color-text-secondary); }
.text-tertiary { color: var(--color-text-tertiary); }
.text-white { color: var(--color-white); }
.text-brand { color: var(--color-purple); }

/* Background Colors */
.bg-white { background-color: var(--color-white); }
.bg-gray-50 { background-color: var(--color-gray-50); }
.bg-gray-100 { background-color: var(--color-gray-100); }
.bg-dark { background-color: var(--color-charcoal); }

/* Spacing */
.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;
}

/* Container */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding-left: var(--space-6);
    padding-right: var(--space-6);
}

@media (min-width: 640px) {
    .container {
        padding-left: var(--space-8);
        padding-right: var(--space-8);
    }
}

@media (min-width: 1024px) {
    .container {
        padding-left: var(--space-12);
        padding-right: var(--space-12);
    }
}

/* Gradient Text */
.gradient-text {
    background: var(--gradient-brand);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Section Base */
.section-container {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding-left: var(--space-6);
    padding-right: var(--space-6);
}

@media (min-width: 640px) {
    .section-container {
        padding-left: var(--space-8);
        padding-right: var(--space-8);
    }
}

@media (min-width: 1024px) {
    .section-container {
        padding-left: var(--space-12);
        padding-right: var(--space-12);
    }
}

/* Responsive Typography */
@media (max-width: 768px) {
    :root {
        --text-5xl: 2.25rem;
        --text-6xl: 2.5rem;
        --text-7xl: 3rem;
        --text-8xl: 3.5rem;
    }
}