/* =============================================================================
   DESIGN SYSTEM TOKENS — Digital Marketing 2026
   Single source of truth. All values consumed from here — never hardcode.
   ============================================================================= */

:root {

    /* ── 1. SPACING (8-point grid) ────────────────────────────────────────── */
    --space-1:  4px;
    --space-2:  8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-5:  24px;
    --space-6:  32px;
    --space-7:  48px;
    --space-8:  64px;
    --space-9:  96px;
    --space-10: 128px;
    --space-11: 160px;

    /* ── 2. LAYOUT ─────────────────────────────────────────────────────────── */
    --max-width:        1280px;
    --gutter:           80px;    /* ≥1280px */
    --gutter-tablet:    48px;    /* 768–1279px */
    --gutter-mobile:    24px;    /* <768px */
    --col-gap:          24px;
    --cols:             12;
    --section-py:       var(--space-8);   /* 64px */
    --section-py-mob:   var(--space-6);   /* 32px */

    /* ── 3. COLOURS ────────────────────────────────────────────────────────── */
    --color-primary:      #C0FF01;   /* lime — primary action */
    --color-primary-dark: #AEE800;   /* lime ~8% darker for hover */
    --color-primary-rgb:  192, 255, 1;
    /* primary-soft is applied inline as rgba(var(--color-primary-rgb), 0.10) */
    --color-primary-soft-hex: #F0FFB8;   /* solid approx — use for backgrounds */

    --color-accent:       #00FFFF;   /* cyan — thin accent only */
    --color-accent-rgb:   0, 255, 255;
    --color-on-primary:   #000000;   /* black text on lime */

    --color-ink:          #0A0A0A;
    --color-body:         #475569;
    --color-muted:        #94A3B8;
    --color-line:         #E2E8F0;
    --color-bg:           #FFFFFF;
    --color-bg-soft:      #F8FAFC;
    --color-bg-dark:      #000000;

    --color-success:      #10B981;
    --color-warning:      #F59E0B;
    --color-error:        #EF4444;
    --color-gold:         #FBBF24;

    /* ── 4. TYPOGRAPHY ─────────────────────────────────────────────────────── */
    --font-head:   'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-body:   'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

    /* Font sizes */
    --text-display:  64px;
    --text-h1:       48px;
    --text-h2:       36px;
    --text-h3:       24px;
    --text-h4:       20px;
    --text-lead:     20px;
    --text-body:     16px;
    --text-small:    14px;
    --text-eyebrow:  13px;
    --text-micro:    12px;
    --text-button:   16px;

    /* Line heights */
    --lh-display: 1.05;
    --lh-h1:      1.10;
    --lh-h2:      1.15;
    --lh-lead:    1.55;
    --lh-body:    1.65;

    /* Letter spacing */
    --ls-display: -0.02em;
    --ls-h1:      -0.02em;
    --ls-eyebrow:  0.12em;

    /* Mobile type overrides (applied at ≤767px) */
    --text-display-mob: 40px;
    --text-h1-mob:      32px;
    --text-h2-mob:      28px;

    /* ── 5. BORDER RADIUS ──────────────────────────────────────────────────── */
    --radius-sm:   8px;
    --radius-md:   12px;
    --radius-lg:   16px;
    --radius-xl:   24px;
    --radius-full: 999px;

    /* ── 6. SHADOWS ────────────────────────────────────────────────────────── */
    --shadow-sm:      0 2px 8px rgba(11,18,32,0.05), 0 1px 2px rgba(11,18,32,0.04);
    --shadow-md:      0 4px 12px rgba(11,18,32,0.06), 0 2px 4px rgba(11,18,32,0.04);
    --shadow-lg:      0 12px 32px rgba(11,18,32,0.08), 0 4px 8px rgba(11,18,32,0.04);
    --shadow-primary: 0 8px 24px rgba(192, 255, 1, 0.30);

    /* ── 7. TRANSITIONS ────────────────────────────────────────────────────── */
    --ease-out:    200ms ease-out;
    --ease-reveal: 600ms ease-out;
}