/**
 * Design System - shadcn/ui inspired
 * Clean, minimal, accessible
 */

:root {
    /* ========================================
       Color Palette (Zinc-based neutrals)
       ======================================== */

    /* Background & Surface */
    --background: 0 0% 100%;
    --foreground: 240 10% 3.9%;

    --card: 0 0% 100%;
    --card-foreground: 240 10% 3.9%;

    --popover: 0 0% 100%;
    --popover-foreground: 240 10% 3.9%;

    /* Primary (Zinc-900 based) */
    --primary: 240 5.9% 10%;
    --primary-foreground: 0 0% 98%;

    /* Secondary (Zinc-100 based) */
    --secondary: 240 4.8% 95.9%;
    --secondary-foreground: 240 5.9% 10%;

    /* Muted */
    --muted: 240 4.8% 95.9%;
    --muted-foreground: 240 3.8% 46.1%;

    /* Accent */
    --accent: 240 4.8% 95.9%;
    --accent-foreground: 240 5.9% 10%;

    /* Destructive (Red) */
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;

    /* Border & Input */
    --border: 240 5.9% 90%;
    --input: 240 5.9% 90%;
    --ring: 240 5.9% 10%;

    /* Semantic Colors */
    --success: 142 76% 36%;
    --success-foreground: 0 0% 100%;

    --warning: 38 92% 50%;
    --warning-foreground: 0 0% 0%;

    --info: 217 91% 60%;
    --info-foreground: 0 0% 100%;

    /* ========================================
       Computed Colors (HSL to use)
       ======================================== */
    --color-bg: hsl(var(--background));
    --color-fg: hsl(var(--foreground));
    --color-card: hsl(var(--card));
    --color-card-fg: hsl(var(--card-foreground));
    --color-primary: hsl(var(--primary));
    --color-primary-fg: hsl(var(--primary-foreground));
    --color-secondary: hsl(var(--secondary));
    --color-secondary-fg: hsl(var(--secondary-foreground));
    --color-muted: hsl(var(--muted));
    --color-muted-fg: hsl(var(--muted-foreground));
    --color-accent: hsl(var(--accent));
    --color-accent-fg: hsl(var(--accent-foreground));
    --color-destructive: hsl(var(--destructive));
    --color-destructive-fg: hsl(var(--destructive-foreground));
    --color-border: hsl(var(--border));
    --color-input: hsl(var(--input));
    --color-ring: hsl(var(--ring));
    --color-success: hsl(var(--success));
    --color-warning: hsl(var(--warning));
    --color-info: hsl(var(--info));

    /* Legacy aliases */
    --color-text: hsl(var(--foreground));
    --color-text-secondary: hsl(var(--muted-foreground));
    --color-surface: hsl(var(--card));
    --color-danger: hsl(var(--destructive));
    --color-error: hsl(var(--destructive));

    /* ========================================
       Border Radius
       ======================================== */
    --radius: 0.5rem;
    --radius-sm: calc(var(--radius) - 4px);
    --radius-md: calc(var(--radius) - 2px);
    --radius-lg: var(--radius);
    --radius-xl: calc(var(--radius) + 4px);
    --radius-full: 9999px;

    /* ========================================
       Spacing (4px base unit)
       ======================================== */
    --spacing-0: 0;
    --spacing-1: 0.25rem;
    --spacing-2: 0.5rem;
    --spacing-3: 0.75rem;
    --spacing-4: 1rem;
    --spacing-5: 1.25rem;
    --spacing-6: 1.5rem;
    --spacing-8: 2rem;
    --spacing-10: 2.5rem;
    --spacing-12: 3rem;
    --spacing-16: 4rem;

    /* Legacy aliases */
    --spacing-xs: var(--spacing-1);
    --spacing-sm: var(--spacing-2);
    --spacing-md: var(--spacing-4);
    --spacing-lg: var(--spacing-6);
    --spacing-xl: var(--spacing-8);

    /* ========================================
       Typography
       ======================================== */
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;

    --leading-tight: 1.25;
    --leading-normal: 1.5;
    --leading-relaxed: 1.625;

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

    /* ========================================
       Shadows (Minimal)
       ======================================== */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);

    /* ========================================
       Transitions
       ======================================== */
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);

    /* ========================================
       Z-Index Scale
       ======================================== */
    --z-dropdown: 50;
    --z-sticky: 40;
    --z-fixed: 30;
    --z-overlay: 40;
    --z-modal: 50;
    --z-popover: 50;
    --z-tooltip: 50;

    /* ========================================
       Component Tokens
       ======================================== */

    /* Header/Footer */
    --header-height: 56px;
    --footer-height: 72px;

    /* Video Card */
    --video-bg: hsl(0 0% 4%);
    --video-border: hsl(0 0% 14.9%);
    --video-radius: var(--radius-lg);

    /* Chat */
    --chat-width: 320px;

    /* Status Indicator */
    --status-size: 8px;
}

/* ========================================
   Dark Mode
   ======================================== */
.dark {
    --background: 240 10% 3.9%;
    --foreground: 0 0% 98%;

    --card: 240 5.9% 10%;
    --card-foreground: 0 0% 98%;

    --popover: 240 10% 3.9%;
    --popover-foreground: 0 0% 98%;

    --primary: 0 0% 98%;
    --primary-foreground: 240 5.9% 10%;

    --secondary: 240 3.7% 15.9%;
    --secondary-foreground: 0 0% 98%;

    --muted: 240 3.7% 15.9%;
    --muted-foreground: 240 5% 64.9%;

    --accent: 240 3.7% 15.9%;
    --accent-foreground: 0 0% 98%;

    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;

    --border: 240 3.7% 15.9%;
    --input: 240 3.7% 15.9%;
    --ring: 240 4.9% 83.9%;

    --video-bg: hsl(0 0% 2%);
    --video-border: hsl(0 0% 12%);
}

/* ========================================
   Base Styles
   ======================================== */
* {
    border-color: var(--color-border);
}

body {
    background: var(--color-bg);
    color: var(--color-fg);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ========================================
   Focus Ring
   ======================================== */
.focus-ring:focus-visible {
    outline: 2px solid var(--color-ring);
    outline-offset: 2px;
}

/* ========================================
   Animations (Minimal)
   ======================================== */
@keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slide-in {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes pulse {
    50% { opacity: 0.5; }
}

.animate-fade-in { animation: fade-in var(--transition-base); }
.animate-slide-in { animation: slide-in var(--transition-base); }
.animate-pulse { animation: pulse 2s infinite; }

/* ========================================
   Responsive
   ======================================== */
@media (max-width: 640px) {
    :root {
        --header-height: 48px;
        --footer-height: 64px;
        --chat-width: 100%;
    }
}