/* =====================================================================
   variables.css — Design tokens (single source of truth)
   Industrial-luxury system. See docs/DESIGN.md.
   All other stylesheets MUST reference these custom properties instead
   of hard-coded values.
   ===================================================================== */

:root {
    /* ---- Brand colors (preserved) ---- */
    --primary: #005BAA;
    --primary-dark: #00467f;
    --primary-light: #2a7fc4;
    --primary-bright: #4aa3e6;       /* on-dark blue accent (hero, route lines) */
    --primary-tint: rgba(0, 91, 170, 0.08);
    --primary-glow: rgba(0, 91, 170, 0.32);

    /* The single warm accent — used like a weld spark, never as a theme. */
    --accent: #F97316;
    --accent-dark: #ea580c;
    --accent-soft: rgba(249, 115, 22, 0.14);

    --success: #16A34A;
    --danger: #EF4444;

    /* ---- Ink / dark surfaces (deep graphite-navy, no pure black) ---- */
    --dark: #0B1220;
    --dark-soft: #131c2e;
    --dark-raise: #1b2638;

    /* ---- Light surfaces ---- */
    --light: #F6F8FB;
    --white: #FFFFFF;

    /* ---- Cool neutral scale ---- */
    --gray-50:  #f7f9fc;
    --gray-100: #eef2f7;
    --gray-200: #e1e7ef;
    --gray-300: #cbd4e1;
    --gray-400: #94a2b8;
    --gray-500: #64748b;
    --gray-600: #475569;
    --gray-700: #334155;

    /* ---- Semantic surfaces / text ---- */
    --bg-body: var(--light);
    --bg-surface: var(--white);
    --bg-subtle: var(--gray-50);
    --text-base: #101a2c;
    --text-soft: var(--gray-600);
    --text-muted: var(--gray-500);
    --text-on-dark: rgba(233, 240, 250, 0.78);
    --text-on-dark-strong: #eef4fc;

    /* ---- Hairlines (carry hierarchy before shadows do) ---- */
    --hairline: rgba(16, 26, 44, 0.10);
    --hairline-strong: rgba(16, 26, 44, 0.16);
    --hairline-light: rgba(255, 255, 255, 0.12);
    --hairline-light-strong: rgba(255, 255, 255, 0.22);
    --border-color: var(--hairline);

    /* ---- Typography ---- */
    --font-display: 'Sora', 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --font-sans: 'Inter', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
    --font-heading: var(--font-display);

    --fs-300: 0.875rem;
    --fs-400: 1rem;
    --fs-500: 1.125rem;
    --fs-600: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
    --fs-700: clamp(1.6rem, 1.2rem + 1.8vw, 2.5rem);
    --fs-800: clamp(2.1rem, 1.4rem + 3.2vw, 3.75rem);
    --fs-900: clamp(2.6rem, 1.5rem + 5vw, 5rem);

    --lh-tight: 1.05;
    --lh-snug: 1.2;
    --lh-base: 1.62;

    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --fw-black: 800;

    --tracking-tight: -0.02em;
    --tracking-display: -0.03em;
    --tracking-wide: 0.14em;

    /* ---- Spacing scale ---- */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4.5rem;
    --space-9: 7rem;
    --section-y: clamp(4.5rem, 2.5rem + 6.5vw, 8.5rem);

    /* ---- Layout ---- */
    --container-max: 1280px;
    --container-pad: clamp(1.15rem, 0.5rem + 2.4vw, 2.5rem);
    --header-h: 76px;

    /* ---- Radii (one consistent scale) ---- */
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 18px;
    --radius-xl: 26px;
    --radius-pill: 999px;

    /* ---- Shadows (tinted navy, never pure black) ---- */
    --shadow-xs: 0 1px 2px rgba(11, 18, 32, 0.06);
    --shadow-sm: 0 2px 8px rgba(11, 18, 32, 0.06);
    --shadow-md: 0 14px 34px rgba(11, 18, 32, 0.09);
    --shadow-lg: 0 30px 70px rgba(11, 18, 32, 0.16);
    --shadow-ring: 0 0 0 1px var(--hairline);

    /* ---- Logistics graphics (hero network/map) ---- */
    --route-line: rgba(120, 178, 235, 0.40);
    --route-line-strong: rgba(150, 205, 245, 0.85);
    --node: #6db4ec;
    --node-live: var(--accent);

    /* ---- Decorative placeholders (used until real photos are added) ---- */
    --blueprint: linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
                 linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    --blueprint-size: 28px 28px;
    --placeholder-dark: linear-gradient(150deg, var(--dark-soft) 0%, var(--dark) 72%);

    /* ---- Motion (Emil Kowalski curves) ---- */
    --ease-out: cubic-bezier(0.22, 1, 0.32, 1);     /* strong ease-out, enter/exit */
    --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);  /* on-screen movement */
    --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);/* subtle "alive" overshoot */
    --dur-press: 140ms;
    --dur-fast: 180ms;
    --dur-base: 240ms;
    --dur-slow: 480ms;
    --dur-reveal: 560ms;

    /* ---- Z-index ladder ---- */
    --z-header: 1000;
    --z-dropdown: 1010;
    --z-overlay: 1100;
}