/**
 * CSS Variables - Apple-inspired Design System
 */

:root {
    /* Primary - Blue accent (Apple-like) */
    --color-primary: hsl(211, 100%, 50%);
    --color-primary-hover: hsl(211, 100%, 60%);
    --color-primary-soft: hsl(211, 100%, 50% / 0.15);

    /* Secondary accent */
    --color-accent: hsl(280, 80%, 60%);
    --color-accent-hover: hsl(280, 80%, 70%);

    /* Background - True black for OLED feel */
    --color-bg: hsl(0, 0%, 0%);
    --color-bg-secondary: hsl(0, 0%, 5%);

    /* Surface - Cards, elevated elements */
    --color-surface: hsl(0, 0%, 10%);
    --color-surface-hover: hsl(0, 0%, 14%);
    --color-surface-active: hsl(0, 0%, 18%);
    --color-surface-raised: hsl(0, 0%, 12%);
    --color-surface-elevated: hsl(0, 0%, 16%);

    /* Borders */
    --color-border: hsl(0, 0%, 15%);
    --color-border-subtle: hsl(0, 0%, 12%);

    /* Text */
    --color-text: hsl(0, 0%, 98%);
    --color-text-secondary: hsl(0, 0%, 72%);
    --color-text-muted: hsl(0, 0%, 50%);

    /* Status */
    --color-success: hsl(142, 70%, 45%);
    --color-warning: hsl(38, 92%, 50%);
    --color-error: hsl(0, 84%, 60%);

    /* Quality badges */
    --color-uhd: hsl(25, 95%, 53%);
    --color-hd: hsl(0, 72%, 51%);
    --color-sd: hsl(0, 0%, 40%);

    /* Tag colors */
    --color-tag-bg: hsl(0, 0%, 18%);
    --color-tag-bg-hover: hsl(0, 0%, 25%);

    /* Spacing - generous Apple-like spacing */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;
    --space-3xl: 64px;

    /* Typography - SF Pro style */
    --font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, sans-serif;

    --font-size-xs: 0.75rem;     /* 12px */
    --font-size-sm: 0.875rem;    /* 14px */
    --font-size-base: 0.9375rem; /* 15px */
    --font-size-md: 1rem;        /* 16px */
    --font-size-lg: 1.125rem;    /* 18px */
    --font-size-xl: 1.375rem;    /* 22px */
    --font-size-2xl: 1.75rem;    /* 28px */
    --font-size-3xl: 2.25rem;    /* 36px */

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

    --line-height-tight: 1.2;
    --line-height-normal: 1.4;
    --line-height-relaxed: 1.6;

    --letter-spacing-tight: -0.02em;

    /* Border radius - Apple-like rounded */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 20px;
    --radius-2xl: 24px;
    --radius-full: 9999px;

    /* Shadows */
    --shadow-sm: 0 2px 8px hsl(0 0% 0% / 0.3);
    --shadow-md: 0 4px 16px hsl(0 0% 0% / 0.4);
    --shadow-lg: 0 8px 32px hsl(0 0% 0% / 0.5);
    --shadow-card:
        0 1px 2px hsl(0 0% 0% / 0.2),
        0 4px 12px hsl(0 0% 0% / 0.25);
    --shadow-card-hover:
        0 2px 4px hsl(0 0% 0% / 0.2),
        0 12px 28px hsl(0 0% 0% / 0.35);

    /* Transitions - Apple-like smooth */
    --ease-out: cubic-bezier(0.25, 1, 0.5, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

    --transition-fast: 180ms var(--ease-out);
    --transition-normal: 280ms var(--ease-out);
    --transition-slow: 400ms var(--ease-out);

    /* Z-index */
    --z-dropdown: 100;
    --z-tooltip: 200;
    --z-sticky: 500;
    --z-fixed: 1000;
    --z-modal: 1100;

    /* Layout */
    --container-max: 1800px;
    --header-height: 64px;
    --grid-gap: 20px;
    --sidebar-width: 280px;
}

body.admin-bar {
    --header-offset: 32px;
}

@media (max-width: 782px) {
    body.admin-bar {
        --header-offset: 46px;
    }
}