/* ReasonSpring — McKinsey Light Design System */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap');

:root {
    /* Core Color Palette — McKinsey: white/pearl/cloud light surfaces */
    --bg-primary: #ffffff;
    --bg-secondary: #f3f4f6;
    --bg-card: #ffffff;
    --bg-elevated: #f3f4f6;
    --bg-overlay: rgba(255, 255, 255, 0.97);

    /* McKinsey named palette (from demo.py reference) */
    --navy: #003A70;
    --navy-light: #1a5a94;
    --charcoal: #2d2d2d;
    --slate: #4a5568;
    --warm-gray: #6b7280;
    --silver: #9ca3af;
    --cloud: #e5e7eb;
    --pearl: #f3f4f6;
    --white: #ffffff;
    --sage: #2d6a4f;
    --sage-light: #e8f5e9;
    --coral: #c0392b;
    --coral-light: #fdecea;
    --gold: #b8860b;
    --gold-light: #fef9e7;

    /* Gradients — subtle, professional */
    --gradient-primary: linear-gradient(135deg, var(--navy-light) 0%, var(--navy) 100%);
    --gradient-warm: linear-gradient(135deg, var(--navy-light) 0%, var(--sage) 100%);
    --gradient-generating: linear-gradient(90deg, var(--navy) 0%, var(--navy-light) 50%, #3b82f6 100%);
    --gradient-electric: linear-gradient(135deg, #3b82f6 0%, var(--navy-light) 100%);
    --gradient-cyber: linear-gradient(135deg, #3b82f6 0%, #06b6d4 100%);
    --gradient-sunset: linear-gradient(135deg, var(--navy-light) 0%, var(--gold) 100%);
    --gradient-aurora: linear-gradient(135deg, var(--sage) 0%, var(--navy-light) 100%);

    /* Mesh Gradient Background — very subtle warm tint on white */
    --gradient-mesh: radial-gradient(at 40% 20%, hsla(210,40%,92%,0.5) 0px, transparent 50%),
                     radial-gradient(at 80% 0%, hsla(210,50%,94%,0.4) 0px, transparent 50%),
                     radial-gradient(at 0% 50%, hsla(40,30%,95%,0.3) 0px, transparent 50%),
                     radial-gradient(at 80% 100%, hsla(210,40%,93%,0.3) 0px, transparent 50%);

    /* McKinsey Accents */
    --accent: var(--navy-light);
    --color-primary: var(--navy-light);
    --color-primary-dark: var(--navy);
    --cyan: #3b82f6;
    --teal: #06b6d4;
    --magenta: #7c3aed;
    --purple: #6366f1;
    --pink: #a855f7;
    --yellow: var(--gold);
    --lime: var(--sage);
    --color-success-light: var(--sage-light);
    --color-google: #4285F4;

    /* Pipeline Stage Colors */
    --stage-research: #06b6d4;
    --stage-script: #6366f1;
    --stage-tts: var(--gold);
    --stage-mixing: var(--sage);
    --stage-video: #a855f7;
    --stage-images: var(--gold);

    /* Text — dark on light */
    --text-primary: var(--charcoal);
    --text-secondary: var(--slate);
    --text-muted: var(--warm-gray);
    --text-dim: var(--silver);

    /* Semantic Status Colors */
    --color-success: var(--sage);
    --color-error: var(--coral);
    --color-error-light: var(--coral-light);
    --color-warning: var(--gold);
    --color-info: var(--navy-light);
    --color-info-secondary: #6366f1;
    --color-user: var(--navy-light);
    --color-user-dark: var(--navy);

    /* Lozenge / Badge Colors */
    --badge-intent-bg: rgba(0, 58, 112, 0.08);
    --badge-intent-fg: var(--navy);
    --badge-submit-bg: rgba(0, 58, 112, 0.08);
    --badge-submit-fg: var(--navy-light);
    --badge-complete-bg: var(--sage-light);
    --badge-complete-fg: var(--sage);
    --badge-error-bg: var(--coral-light);
    --badge-error-fg: var(--coral);

    /* Artifact type badge colors */
    --badge-screenplay-bg: #e0f7fa;
    --badge-screenplay-fg: #006064;
    --badge-script-bg: #fff3e0;
    --badge-script-fg: #e65100;
    --badge-segment-bg: #e8eaf6;
    --badge-segment-fg: #283593;
    --badge-audio-bg: #e8f5e9;
    --badge-audio-fg: #1b5e20;
    --badge-video-bg: #f3e5f5;
    --badge-video-fg: #4a148c;
    --badge-image-bg: #fce4ec;
    --badge-image-fg: #880e4f;

    /* Surface Colors */
    --deep-space: var(--pearl);
    --card-glass: rgba(255, 255, 255, 0.85);
    --surface-tabs: rgba(255, 255, 255, 0.97);
    --surface-strip: var(--pearl);
    --border-subtle: var(--cloud);

    /* Glass Effects — light mode: subtle gray tints */
    --glass-bg: rgba(0, 0, 0, 0.02);
    --glass-bg-hover: rgba(0, 0, 0, 0.04);
    --glass-border: var(--cloud);
    --glass-blur: blur(24px);

    /* Dark-surface text — shared by nav, player, video overlay */
    --dark-text: #ffffff;
    --dark-text-dim: rgba(255, 255, 255, 0.65);
    --dark-text-muted: rgba(255, 255, 255, 0.7);
    --dark-hover-bg: rgba(255, 255, 255, 0.1);
    --dark-active-bg: rgba(255, 255, 255, 0.15);

    /* Nav bar aliases (backward compat) */
    --nav-bg: var(--navy);
    --nav-text: var(--dark-text);
    --nav-text-dim: var(--dark-text-dim);
    --nav-text-muted: var(--dark-text-muted);
    --nav-hover-bg: var(--dark-hover-bg);
    --nav-active-bg: var(--dark-active-bg);

    /* RGB Triplets — for rgba(var(--rgb-*), alpha) in app.css */
    --rgb-black: 0, 0, 0;
    --rgb-white: 255, 255, 255;
    --rgb-surface-deep: 243, 244, 246;           /* pearl */
    --rgb-primary: 0, 58, 112;                   /* navy */
    --rgb-purple: 99, 102, 241;
    --rgb-magenta: 124, 58, 237;
    --rgb-error: 192, 57, 43;                    /* coral */

    /* Shadows — lighter, more subtle for light mode */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.10);
    --shadow-xl: 0 8px 24px rgba(0, 0, 0, 0.12);
    --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
    --shadow-fab: 0 4px 12px rgba(0, 58, 112, 0.15), 0 2px 4px rgba(0, 0, 0, 0.08);
    --shadow-modal: 0 24px 64px rgba(0, 0, 0, 0.15);

    /* Hover & Glow */
    --hover-lift-sm: translateY(-2px);
    --hover-lift-md: translateY(-4px);
    --glow-accent: 0 0 20px rgba(0, 58, 112, 0.08);
    --glow-accent-strong: 0 0 40px rgba(0, 58, 112, 0.12);

    /* Spacing */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;

    /* Border Radius — McKinsey: tight, institutional */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 12px;
    --radius-2xl: 16px;
    --radius-full: 9999px;

    /* Typography — McKinsey: serif headings, clean body */
    --font-display: 'Source Serif 4', Georgia, 'Times New Roman', serif;
    --font-body: 'Inter', 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;
    --font-talk: 'Space Grotesk', var(--font-mono);

    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    --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 */

    /* Easing Curves */
    --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    --ease-elastic: cubic-bezier(0.68, -0.6, 0.32, 1.6);

    /* Durations */
    --duration-instant: 50ms;
    --duration-fast: 150ms;
    --duration-base: 300ms;
    --duration-modal: 300ms;
    --duration-slow: 500ms;
    --duration-bounce: 600ms;
    --duration-elastic: 800ms;

    /* Transitions (shorthand) */
    --transition-fast: var(--duration-fast) var(--ease-smooth);
    --transition-base: var(--duration-base) var(--ease-smooth);
    --transition-slow: var(--duration-slow) var(--ease-smooth);
    --transition-bounce: var(--duration-bounce) var(--ease-bounce);
    --transition-elastic: var(--duration-elastic) var(--ease-elastic);

    /* Z-Index Scale */
    --z-base: 1;
    --z-dropdown: 100;
    --z-sticky: 199;
    --z-tabs: 210;
    --z-nav: 1001;
    --z-panel: 2100;
    --z-talk: 5000;
    --z-modal-backdrop: 10000;
    --z-modal: 10001;
    --z-video-fs: 4001;
    --z-video-fs-chrome: 4002;

    /* Layout — bottom tab bar geometry (single source of truth) */
    --tab-bar-h: 60px;
    --talk-overshoot: 24px;
    --nav-h: 56px;
    --announce-h: 32px;
    --player-h: 72px;
    /* env() doesn't resolve in :root, so tabs-inset uses only custom props */
    --tabs-inset: calc(var(--tab-bar-h) + var(--talk-overshoot));
}

/* Global Reset */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scroll-behavior: smooth;
    overflow-x: hidden;
    overscroll-behavior: none;
}

body {
    font-family: var(--font-body);
    font-weight: var(--font-weight-normal);
    background: var(--bg-primary);
    background-image: var(--gradient-mesh);
    background-attachment: fixed;
    color: var(--text-primary);
    min-height: 100vh;
    line-height: 1.7;
    font-size: 15px;
    overflow-x: hidden;
    overscroll-behavior: none;
}

/* McKinsey Typography — Source Serif 4 for ALL headings, site-wide */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    letter-spacing: -0.01em;
}

h1 {
    font-weight: var(--font-weight-bold);
    color: var(--navy);
}

h2 {
    font-weight: var(--font-weight-semibold);
    color: var(--navy);
}

h3, h4, h5, h6 {
    font-weight: var(--font-weight-semibold);
    color: var(--slate);
}

/* Links — McKinsey navy */
a {
    color: var(--navy-light);
    text-decoration: none;
}

a:hover {
    color: var(--navy);
    text-decoration: underline;
}

/* Selection */
::selection {
    background: var(--navy);
    color: var(--white);
}

::-moz-selection {
    background: var(--navy);
    color: var(--white);
}

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

/* Fade-in on load animation */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.fade-in-up {
    animation: fadeInUp 0.4s var(--ease-smooth) both;
}

/* Line clamp utilities */
.line-clamp-1 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }