/**
 * Real Productions — Design Tokens
 * Single source of truth for colour, spacing, radius, shadow, and type scale.
 * See .design/DESIGN.md for the semantic rationale behind every value.
 */

:root {
    /* Colour — dark (default) */
    --color-base: #0B0B0F;
    --color-surface: #14141A;
    --color-surface-raised: #1C1C24;
    --color-text: #F2F2F5;
    --color-text-muted: rgba(242, 242, 245, 0.65);
    --color-accent: #FF6B1A;
    --color-accent-hover: #E85F17;
    --color-info: #3B82F6;
    --color-success: #10B981;
    --color-error: #EF4444;
    --color-border: rgba(255, 255, 255, 0.08);
    --color-border-strong: rgba(255, 255, 255, 0.16);
    --color-scrim: rgba(0, 0, 0, 0.6);
    --color-accent-tint: rgba(255, 107, 26, 0.08);
    --color-accent-tint-15: rgba(255, 107, 26, 0.15);
    --color-info-tint-15: rgba(59, 130, 246, 0.15);

    /* Spacing */
    --space-3xs: 0.25rem;
    --space-2xs: 0.5rem;
    --space-xs: 0.75rem;
    --space-sm: 1rem;
    --space-md: 1.5rem;
    --space-lg: 2rem;
    --space-xl: 3rem;
    --space-2xl: 4rem;
    --space-section-mobile: 2.5rem;
    --space-section-desktop: 4rem;

    /* Radius */
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 999px;

    /* Shadow — single-layer, subtle. No deep/blurred shadows. */
    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-card-hover: 0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-modal: 0 8px 32px rgba(0, 0, 0, 0.5);

    /* Typography scale (desktop; mobile handled via clamp in theme.css) */
    --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --text-h1: 3rem;
    --text-h2: 2rem;
    --text-h3: 1.5rem;
    --text-h4: 1.125rem;
    --text-body: 1rem;
    --text-label: 0.875rem;
    --text-caption: 0.75rem;

    /* Layout */
    --container-max: 1280px;
    --gutter-mobile: 1.5rem;
    --gutter-desktop: 2rem;
    --card-min: 280px;

    /* Motion (respect prefers-reduced-motion overrides in theme.css) */
    --transition-fast: 150ms ease-out;
    --transition-base: 200ms ease-out;
    --focus-ring: 2px solid var(--color-accent);
    --focus-offset: 2px;
}

/* Light mode overrides — applied when the theme toggle sets data-theme="light" */
:root[data-theme="light"] {
    --color-base: #FFFFFF;
    --color-surface: #F5F5F7;
    --color-surface-raised: #EBEBEF;
    --color-text: #1A1A1F;
    --color-text-muted: rgba(26, 26, 31, 0.6);
    --color-border: rgba(0, 0, 0, 0.08);
    --color-border-strong: rgba(0, 0, 0, 0.14);
    --color-accent-tint: rgba(255, 107, 26, 0.06);
    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.06);
    --shadow-card-hover: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-modal: 0 8px 32px rgba(0, 0, 0, 0.16);
}

/* Respect OS-level preference when the visitor hasn't explicitly chosen a theme */
@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) {
        --color-base: #FFFFFF;
        --color-surface: #F5F5F7;
        --color-surface-raised: #EBEBEF;
        --color-text: #1A1A1F;
        --color-text-muted: rgba(26, 26, 31, 0.6);
        --color-border: rgba(0, 0, 0, 0.08);
        --color-border-strong: rgba(0, 0, 0, 0.14);
        --color-accent-tint: rgba(255, 107, 26, 0.06);
        --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.06);
        --shadow-card-hover: 0 4px 12px rgba(0, 0, 0, 0.08);
        --shadow-modal: 0 8px 32px rgba(0, 0, 0, 0.16);
    }
}