/* ==========================================================================
   ELTOP DARK – CSS Custom Properties
   Color system: OKLCH  |  No border-radius  |  Dark + Orange
   ========================================================================== */

:root {
    /* ── Color Tokens ──────────────────────────────────────────────────────── */

    /* Backgrounds */
    --bg: oklch(11% 0.008 55); /* near-black warm  */
    --surface: oklch(16% 0.01 55); /* card bg          */
    --surface-2: oklch(20% 0.01 55); /* card hover       */
    --surface-3: oklch(13% 0.009 55); /* subtle inset     */

    /* Accent – orange */
    --accent: oklch(67% 0.19 48); /* primary orange   */
    --accent-dark: oklch(58% 0.21 45); /* hover / pressed  */
    --accent-dim: oklch(67% 0.1 48); /* muted orange     */

    /* Typography */
    --text: oklch(94% 0.006 55); /* primary text     */
    --text-muted: oklch(62% 0.008 55); /* secondary text   */
    --text-subtle: oklch(40% 0.007 55); /* placeholder      */

    /* Borders */
    --border: oklch(24% 0.01 55); /* default border   */
    --border-strong: oklch(32% 0.012 55); /* emphasis border  */

    /* ── Radius ───────────────────────────────────────────────────────────── */
    --radius: 0px;
    --radius-sm: 2px;

    /* ── Spacing Scale (4-px base) ────────────────────────────────────────── */
    --sp-1: 0.25rem; /*  4px */
    --sp-2: 0.5rem; /*  8px */
    --sp-3: 0.75rem; /* 12px */
    --sp-4: 1rem; /* 16px */
    --sp-5: 1.25rem; /* 20px */
    --sp-6: 1.5rem; /* 24px */
    --sp-8: 2rem; /* 32px */
    --sp-10: 2.5rem; /* 40px */
    --sp-12: 3rem; /* 48px */
    --sp-16: 4rem; /* 64px */
    --sp-20: 5rem; /* 80px */
    --sp-24: 6rem; /* 96px */
    --sp-32: 8rem; /* 128px */

    /* ── Type Scale ───────────────────────────────────────────────────────── */
    --text-xs: 0.75rem; /*  12px */
    --text-sm: 0.875rem; /*  14px */
    --text-base: 1rem; /*  16px */
    --text-lg: 1.125rem; /*  18px */
    --text-xl: 1.25rem; /*  20px */
    --text-2xl: 1.5rem; /*  24px */
    --text-3xl: 1.875rem; /*  30px */
    --text-4xl: 2.25rem; /*  36px */
    --text-5xl: 3rem; /*  48px */
    --text-6xl: 3.75rem; /*  60px */
    --text-7xl: 4.5rem; /*  72px */

    /* ── Fonts ────────────────────────────────────────────────────────────── */
    --font-display: "Barlow Condensed", system-ui, sans-serif;
    --font-body: "Inter", system-ui, sans-serif;

    /* ── Line heights ─────────────────────────────────────────────────────── */
    --leading-tight: 1.1;
    --leading-snug: 1.25;
    --leading-normal: 1.5;
    --leading-relaxed: 1.7;

    /* ── Letter spacing ───────────────────────────────────────────────────── */
    --tracking-tight: -0.02em;
    --tracking-normal: 0;
    --tracking-wide: 0.06em;
    --tracking-wider: 0.1em;
    --tracking-widest: 0.16em;

    /* ── Layout ───────────────────────────────────────────────────────────── */
    --container-max: 1280px;
    --container-pad: clamp(1.25rem, 5vw, 3rem);
    --section-py: clamp(4rem, 8vw, 7rem);

    /* ── Shadows ──────────────────────────────────────────────────────────── */
    --shadow-sm: 0 1px 3px oklch(0% 0 0 / 0.35);
    --shadow-md: 0 4px 16px oklch(0% 0 0 / 0.5);
    --shadow-lg: 0 12px 40px oklch(0% 0 0 / 0.6);
    --shadow-accent: 0 4px 24px oklch(67% 0.19 48 / 0.35);

    /* ── Transitions ──────────────────────────────────────────────────────── */
    --ease: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --dur-fast: 140ms;
    --dur-normal: 240ms;
    --dur-slow: 400ms;

    /* ── Z-index ──────────────────────────────────────────────────────────── */
    --z-header: 100;
    --z-overlay: 200;
    --z-modal: 300;
}

/* Reduced-motion overrides */
@media (prefers-reduced-motion: reduce) {
    :root {
        --dur-fast: 0ms;
        --dur-normal: 0ms;
        --dur-slow: 0ms;
    }
}