/**
 * Yugantar Cybernetics - Enterprise CSS System
 * Part 1: Base Variables & Reset
 */

:root {
    /* 1. Core Brand (The Void & The Light) */
    --sys-core-navy-900: #020611;
    /* Ultra Deep Navy (Deepened for more contrast) */
    --sys-core-navy-800: #040c1d;
    /* Standard Surface */
    --sys-core-navy-700: #0a1628;
    /* Elevated Surface */

    --sys-core-saffron: #f59e0b;
    /* Vibrant Saffron for CTA & Alerts */
    --sys-core-saffron-hover: #d97706;
    --sys-core-gold: #c29b40;
    /* Refined Muted Gold for Heritage & Borders */

    /* 2. Neutral Surfaces (The Structure) */
    --sys-surface-white: #FFFFFF;
    --sys-surface-pearl: #FDFCF8;
    /* Light Mode Backgrounds */
    --sys-surface-glass: rgba(255, 255, 255, 0.03);
    /* Dark mode cards */

    /* 3. Text System */
    --sys-text-primary-dark: #f8fafc;
    --sys-text-secondary-dark: rgba(248, 250, 252, 0.75);
    /* Eye-comfort contrast for dark mode */
    --sys-text-muted-dark: rgba(248, 250, 252, 0.45);

    --sys-text-primary-light: #061121;
    --sys-text-secondary-light: #ffffff;

    /* 4. Borders & Geometry */
    --sys-border-light: rgba(255, 255, 255, 0.08);
    --sys-border-focus: rgba(212, 175, 55, 0.3);

    --sys-radius-sm: 4px;
    --sys-radius-md: 8px;
    --sys-radius-lg: 16px;
    --sys-radius-pill: 9999px;

    /* 5. Typography */
    --sys-font-heading: 'Outfit', sans-serif;
    --sys-font-body: 'Inter', sans-serif;

    /* Fluid Type Scale (Desktop to Mobile interpolation) */
    --sys-text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
    --sys-text-sm: clamp(0.875rem, 0.82rem + 0.25vw, 1rem);
    --sys-text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
    --sys-text-lg: clamp(1.125rem, 1.05rem + 0.375vw, 1.25rem);
    --sys-text-xl: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
    --sys-text-2xl: clamp(1.5rem, 1.35rem + 0.75vw, 1.875rem);
    --sys-text-3xl: clamp(1.875rem, 1.6rem + 1.25vw, 2.5rem);
    --sys-text-4xl: clamp(2.25rem, 1.85rem + 2vw, 3.25rem);
    --sys-text-5xl: clamp(2.75rem, 2.15rem + 3vw, 4.25rem);

    /* 6. Motion Tokens */
    --sys-ease-standard: cubic-bezier(0.4, 0.0, 0.2, 1);
    --sys-ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.1);
    --sys-ease-cinematic: cubic-bezier(0.19, 1, 0.22, 1);

    --sys-duration-fast: 150ms;
    --sys-duration-normal: 300ms;
    --sys-duration-slow: 600ms;

    /* 7. Elevation / Shadows */
    --sys-shadow-raise: 0 10px 30px rgba(0, 0, 0, 0.3);
    --sys-shadow-hover: 0 15px 40px rgba(0, 0, 0, 0.4), 0 0 20px rgba(255, 143, 0, 0.1);
}

/* Global Typography Resets using Tokens */
body {
    font-family: var(--sys-font-body);
    font-size: var(--sys-text-base);
    line-height: 1.6;
    color: var(--sys-text-primary-light);
    background-color: var(--sys-surface-white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1,
.sys-h1 {
    font-family: var(--sys-font-heading);
    font-size: var(--sys-text-5xl);
    font-weight: 700;
    letter-spacing: -1px;
    line-height: 1.1;
}

h2,
.sys-h2 {
    font-family: var(--sys-font-heading);
    font-size: var(--sys-text-4xl);
    font-weight: 700;
    letter-spacing: -0.5px;
    line-height: 1.2;
}

h3,
.sys-h3 {
    font-family: var(--sys-font-heading);
    font-size: var(--sys-text-3xl);
    font-weight: 600;
    line-height: 1.3;
}

h4,
.sys-h4 {
    font-family: var(--sys-font-heading);
    font-size: var(--sys-text-2xl);
    font-weight: 600;
    line-height: 1.3;
}

h5,
.sys-h5 {
    font-family: var(--sys-font-body);
    font-size: var(--sys-text-xl);
    font-weight: 600;
}

h6,
.sys-h6 {
    font-family: var(--sys-font-body);
    font-size: var(--sys-text-lg);
    font-weight: 600;
}

.sys-text-secondary {
    color: var(--sys-text-secondary-light);
}

.dark-theme .sys-text-secondary,
[data-theme="dark"] .sys-text-secondary {
    color: var(--sys-text-secondary-dark);
}

.sys-text-saffron {
    color: var(--sys-core-saffron) !important;
}

.sys-text-gold {
    color: var(--sys-core-gold) !important;
}

/* Responsive Fluid Spacing Utilities */
/* Desktop: 120px padding (7.5rem), Mobile: 60px (3.75rem) */
.py-sys-xl {
    padding-top: clamp(3.75rem, -0.625rem + 15vw, 7.5rem) !important;
    padding-bottom: clamp(3.75rem, -0.625rem + 15vw, 7.5rem) !important;
}

/* Desktop: 80px padding (5rem), Mobile: 40px (2.5rem) */
.py-sys-lg {
    padding-top: clamp(2.5rem, 0.625rem + 7.5vw, 5rem) !important;
    padding-bottom: clamp(2.5rem, 0.625rem + 7.5vw, 5rem) !important;
}

/* Background Utilities */
.bg-sys-navy-900 {
    background-color: var(--sys-core-navy-900) !important;
    color: var(--sys-text-primary-dark);
}

.bg-sys-navy-800 {
    background-color: var(--sys-core-navy-800) !important;
    color: var(--sys-text-primary-dark);
}

.bg-sys-navy-700 {
    background-color: var(--sys-core-navy-700) !important;
    color: var(--sys-text-primary-dark);
}

.bg-sys-pearl {
    background-color: var(--sys-surface-pearl) !important;
    color: var(--sys-text-primary-light);
}