/* ==========================================================================
   MATRITSATA - CSS CUSTOM PROPERTIES (DESIGN TOKENS)
   ========================================================================== */
:root {
    /* Brand Colors */
    --color-primary-dark: #0B0B0C;
    --color-surface-dark: #121214;
    --color-surface-elevated: #1A1A1E;
    --color-accent-red: #E50914;
    --color-accent-red-hover: #C70812;
    --color-accent-red-glow: rgba(229, 9, 20, 0.25);
    --color-accent-red-subtle: rgba(229, 9, 20, 0.08);

    /* Light Theme Colors */
    --color-bg-body: #FFFFFF;
    --color-bg-alt: #F8F9FA;
    --color-border-light: #E8E8E8;
    --color-border-subtle: #F0F0F0;
    --color-border-dark: #242428;

    /* Typography Colors */
    --color-text-main: #111113;
    --color-text-secondary: #5E5E64;
    --color-text-muted: #8E8E93;
    --color-text-light: #FFFFFF;
    --color-text-light-muted: #A2A2A8;

    /* Unified Site-Wide Typography (Matching the Concept Font) */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --font-serif: var(--font-sans);
    /* Points all headlines to the same clean sans-serif */
    --font-tech: 'Space Grotesk', -apple-system, BlinkMacSystemFont, monospace;

    /* Layout & Spacing */
    --container-max-width: 1920px;
    --container-padding: clamp(24px, 2.2vw, 36px);
    --header-top-height: 64px;
    --header-sub-height: 46px;
    --radius-sm: 2px;
    --radius-md: 4px;
    --radius-lg: 8px;
    --transition-fast: 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    --transition-smooth: 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.04);
    --shadow-floating: 0 10px 30px rgba(0, 0, 0, 0.12);
}