/* ==========================================================
   dimosTV Design System
   DS1 — Foundations
========================================================== */

:root {
    /* Brand */
    --dtv-color-primary: #CC0000;
    --dtv-color-primary-hover: #E00000;
    --dtv-color-secondary: #0066CC;
    --dtv-color-secondary-hover: #0074E8;

    /* Neutrals / Surfaces */
    --dtv-color-page: #F4F7FB;
    --dtv-color-background: #F4F7FB;
    --dtv-color-surface: #FFFFFF;
    --dtv-color-surface-soft: #EEF3F8;
    --dtv-color-surface-dark: #0F172A;
    --dtv-color-surface-navy: #1A2E4A;

    /* Text */
    --dtv-color-text: #1A2E4A;
    --dtv-color-text-soft: rgba(26, 46, 74, .72);
    --dtv-color-text-muted: rgba(26, 46, 74, .58);
    --dtv-color-text-inverse: #FFFFFF;
    --dtv-color-text-inverse-soft: rgba(255, 255, 255, .78);
    --dtv-color-text-inverse-muted: rgba(255, 255, 255, .58);

    /* Borders */
    --dtv-color-border: rgba(26, 46, 74, .12);
    --dtv-color-border-strong: rgba(26, 46, 74, .22);
    --dtv-color-border-inverse: rgba(255, 255, 255, .16);

    /* Overlays */
    --dtv-overlay-soft: rgba(15, 23, 42, .58);
    --dtv-overlay-dark: rgba(5, 10, 20, .78);
    --dtv-overlay-card: linear-gradient(
        to top,
        rgba(5, 10, 20, .88) 0%,
        rgba(5, 10, 20, .58) 38%,
        rgba(5, 10, 20, .12) 68%,
        rgba(5, 10, 20, 0) 100%
    );

    /* Typography */
    --dtv-font-heading: Oswald, sans-serif;
    --dtv-font-body: inherit;

    --dtv-font-weight-regular: 400;
    --dtv-font-weight-medium: 600;
    --dtv-font-weight-bold: 800;
    --dtv-font-weight-black: 900;

    --dtv-text-display-xl: clamp(56px, 5.5vw, 88px);
    --dtv-text-display-lg: clamp(44px, 4.6vw, 72px);
    --dtv-text-heading-xl: clamp(32px, 3.2vw, 44px);
    --dtv-text-heading-lg: clamp(28px, 2.6vw, 36px);
    --dtv-text-heading-md: 24px;
    --dtv-text-heading-sm: 20px;
    --dtv-text-body-lg: 18px;
    --dtv-text-body-md: 16px;
    --dtv-text-body-sm: 14px;
    --dtv-text-caption: 12px;
    --dtv-text-label: 11px;

    --dtv-line-tight: 1;
    --dtv-line-heading: 1.12;
    --dtv-line-body: 1.55;

    /* Spacing scale */
    --dtv-space-0: 0;
    --dtv-space-2xs: 4px;
    --dtv-space-xs: 8px;
    --dtv-space-sm: 12px;
    --dtv-space-md: 16px;
    --dtv-space-lg: 24px;
    --dtv-space-xl: 32px;
    --dtv-space-2xl: 48px;
    --dtv-space-3xl: 64px;
    --dtv-space-4xl: 80px;
    --dtv-space-5xl: 96px;

    --dtv-space-section: var(--dtv-space-4xl);
    --dtv-space-section-sm: var(--dtv-space-3xl);

    /* Radius */
    --dtv-radius-xs: 6px;
    --dtv-radius-sm: 10px;
    --dtv-radius-md: 14px;
    --dtv-radius-lg: 18px;
    --dtv-radius-xl: 22px;
    --dtv-radius-2xl: 28px;
    --dtv-radius-pill: 999px;

    /* Elevation */
    --dtv-shadow-xs: 0 4px 14px rgba(15, 23, 42, .08);
    --dtv-shadow-sm: 0 10px 28px rgba(15, 23, 42, .10);
    --dtv-shadow-md: 0 18px 46px rgba(15, 23, 42, .14);
    --dtv-shadow-lg: 0 28px 80px rgba(15, 23, 42, .22);
    --dtv-shadow-xl: 0 38px 110px rgba(15, 23, 42, .30);
    --dtv-shadow-modal: 0 32px 110px rgba(0, 0, 0, .44);
    --dtv-shadow-control: 0 14px 36px rgba(0, 0, 0, .28);

    /* Motion */
    --dtv-ease-standard: cubic-bezier(.2, .8, .2, 1);
    --dtv-ease-emphasized: cubic-bezier(.2, .9, .1, 1);
    --dtv-motion-fast: .14s var(--dtv-ease-standard);
    --dtv-motion-normal: .22s var(--dtv-ease-standard);
    --dtv-motion-slow: .34s var(--dtv-ease-emphasized);

    /* Z-index */
    --dtv-z-base: 1;
    --dtv-z-controls: 20;
    --dtv-z-dropdown: 100;
    --dtv-z-overlay: 1000;
    --dtv-z-modal: 999990;
    --dtv-z-player: 999998;
    --dtv-z-toast: 999999;

    /* Layout */
    --dtv-container-max: 1440px;
    --dtv-container-padding: 24px;
    --dtv-card-width-sm: 240px;
    --dtv-card-width-md: 280px;
    --dtv-card-width-lg: 320px;
}

@media (max-width: 768px) {
    :root {
        --dtv-container-padding: 16px;
        --dtv-space-section: var(--dtv-space-3xl);
        --dtv-space-section-sm: var(--dtv-space-2xl);
    }
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --dtv-motion-fast: 0s;
        --dtv-motion-normal: 0s;
        --dtv-motion-slow: 0s;
    }
}