/* ═══════════════════════════════════════════════════════════════════════════
   🏭 IRONION SARL — INDUSTRIAL DARK PREMIUM DESIGN SYSTEM
   Version: 2.0.0 ULTRA PREMIUM
   Based on: Safer-inspired Industrial Dark Editorial
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    /* ─────────────────────────────────────────────────────────────────────────
     🎨 COLOR TOKENS — INDUSTRIAL DARK PREMIUM
     ───────────────────────────────────────────────────────────────────────── */

    /* Background */
    --bg-primary: #0B0D0F;
    --bg-secondary: #0F1215;
    --bg-tertiary: #14181C;
    --bg-surface: #101316;
    --bg-surface-alt: #0D1013;
    --bg-overlay: rgba(0, 0, 0, 0.55);

    /* Text */
    --text-primary: #F4F6F8;
    --text-secondary: rgba(244, 246, 248, 0.78);
    --text-tertiary: rgba(244, 246, 248, 0.58);
    --text-muted: rgba(244, 246, 248, 0.42);
    --text-inverse: #0B0D0F;

    /* Brand — Industrial Orange */
    --brand-accent: #F97316;
    --brand-accent-hover: #FF8A3D;
    --brand-accent-pressed: #E86207;
    --brand-accent-glow: rgba(249, 115, 22, 0.35);

    /* Stroke / Borders */
    --stroke-subtle: rgba(244, 246, 248, 0.10);
    --stroke-default: rgba(244, 246, 248, 0.14);
    --stroke-strong: rgba(244, 246, 248, 0.22);
    --stroke-accent: rgba(249, 115, 22, 0.40);

    /* State colors */
    --success: #22C55E;
    --warning: #F59E0B;
    --danger: #EF4444;
    --info: #3B82F6;

    /* ─────────────────────────────────────────────────────────────────────────
     📐 TYPOGRAPHY TOKENS
     ───────────────────────────────────────────────────────────────────────── */

    /* Font Families */
    --font-display: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Monaco, Consolas, monospace;

    /* Font Sizes — Desktop */
    --text-hero-h1: 70px;
    --text-h1: 64px;
    --text-h2: 44px;
    --text-h3: 22px;
    --text-body-lg: 18px;
    --text-body: 16px;
    --text-caption: 12px;
    --text-label: 11px;

    /* Font Weights */
    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;
    --weight-extrabold: 800;

    /* Letter Spacing */
    --tracking-tight: -0.02em;
    --tracking-normal: 0;
    --tracking-wide: 0.08em;
    --tracking-wider: 0.12em;

    /* Line Heights */
    --leading-tight: 1.05;
    --leading-snug: 1.2;
    --leading-normal: 1.5;
    --leading-relaxed: 1.7;

    /* ─────────────────────────────────────────────────────────────────────────
     📏 SPACING TOKENS
     ───────────────────────────────────────────────────────────────────────── */

    --space-0: 0;
    --space-2: 2px;
    --space-4: 4px;
    --space-6: 6px;
    --space-8: 8px;
    --space-10: 10px;
    --space-12: 12px;
    --space-16: 16px;
    --space-20: 20px;
    --space-24: 24px;
    --space-32: 32px;
    --space-40: 40px;
    --space-48: 48px;
    --space-64: 64px;
    --space-80: 80px;
    --space-96: 96px;
    --space-120: 120px;

    /* ─────────────────────────────────────────────────────────────────────────
     🔲 RADIUS TOKENS
     ───────────────────────────────────────────────────────────────────────── */

    --radius-xs: 8px;
    --radius-sm: 12px;
    --radius-md: 16px;
    --radius-lg: 22px;
    --radius-xl: 28px;
    --radius-pill: 999px;

    /* ─────────────────────────────────────────────────────────────────────────
     🌑 SHADOW TOKENS
     ───────────────────────────────────────────────────────────────────────── */

    --shadow-sm: 0 6px 18px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 14px 40px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.55);
    --shadow-glow-accent: 0 0 0 1px rgba(249, 115, 22, 0.40), 0 16px 55px rgba(249, 115, 22, 0.18);

    /* ─────────────────────────────────────────────────────────────────────────
     🌫️ BLUR TOKENS
     ───────────────────────────────────────────────────────────────────────── */

    --blur-glass: 18px;
    --blur-nav: 22px;

    /* ─────────────────────────────────────────────────────────────────────────
     📐 GRID & LAYOUT TOKENS
     ───────────────────────────────────────────────────────────────────────── */

    --container-max: 1240px;
    --grid-gutter: 24px;
    --grid-columns: 12;

    /* ─────────────────────────────────────────────────────────────────────────
     ⏱️ MOTION TOKENS
     ───────────────────────────────────────────────────────────────────────── */

    --duration-fast: 160ms;
    --duration-normal: 280ms;
    --duration-slow: 520ms;

    --easing-standard: cubic-bezier(0.2, 0, 0.2, 1);
    --easing-emphasized: cubic-bezier(0.16, 1, 0.3, 1);

    --hover-lift-y: -4px;
    --hover-scale: 1.01;

    /* ─────────────────────────────────────────────────────────────────────────
     🎭 BACKGROUND GRADIENTS
     ───────────────────────────────────────────────────────────────────────── */

    --gradient-hero-glow: radial-gradient(900px circle at 20% 30%, rgba(249, 115, 22, 0.14), transparent 60%);
    --gradient-ambient: radial-gradient(900px circle at 80% 10%, rgba(255, 255, 255, 0.06), transparent 55%);
    --gradient-glass: linear-gradient(135deg, rgba(244, 246, 248, 0.06) 0%, rgba(244, 246, 248, 0.03) 45%, rgba(244, 246, 248, 0.06) 100%);
    --gradient-image-overlay: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.75) 85%);
    --gradient-vignette: radial-gradient(circle at 50% 40%, rgba(0, 0, 0, 0.20), rgba(0, 0, 0, 0.80));

    /* Header height */
    --header-height: 72px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   📱 RESPONSIVE TYPOGRAPHY
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1023px) {
    :root {
        --text-hero-h1: 56px;
        --text-h1: 48px;
        --text-h2: 36px;
        --text-h3: 20px;
        --text-body-lg: 17px;
        --grid-gutter: 20px;
    }
}

@media (max-width: 767px) {
    :root {
        --text-hero-h1: 40px;
        --text-h1: 36px;
        --text-h2: 28px;
        --text-h3: 18px;
        --text-body-lg: 16px;
        --text-body: 15px;
        --grid-gutter: 16px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   🌐 GLOBAL RESETS & BASE STYLES
   ═══════════════════════════════════════════════════════════════════════════ */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-body);
    font-size: var(--text-body);
    line-height: var(--leading-normal);
    color: var(--text-secondary);
    background: var(--bg-primary);
    overflow-x: hidden;
}

/* Typography hierarchy */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-display);
    color: var(--text-primary);
    font-weight: var(--weight-bold);
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-tight);
}

h1 {
    font-size: var(--text-h1);
    font-weight: var(--weight-extrabold);
}

h2 {
    font-size: var(--text-h2);
}

h3 {
    font-size: var(--text-h3);
}

a {
    color: inherit;
    text-decoration: none;
    transition: color var(--duration-fast) var(--easing-standard);
}

img,
video {
    max-width: 100%;
    display: block;
}

/* Selection */
::selection {
    background: var(--brand-accent);
    color: var(--text-inverse);
}

/* Focus styles */
:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--brand-accent-glow);
    outline-offset: 2px;
}