/**
 * Design Tokens — Aqua Source Boise
 * Single source of truth for all colors, typography, spacing, and breakpoints.
 * Never hardcode values anywhere else — always reference these variables.
 *
 * @author Fudo
 * @date   2026-05-01
 * @package aquasource
 */

:root {

    /* ── Brand Navy ─────────────────────────────────────────────────────── */
    --navy-900:          #06214f;
    --navy-800:          #0b3a8a;
    --navy-700:          #1453c4;
    --navy-600:          #2767e0;
    --blue-50:           #eaf2ff;
    --blue-100:          #d6e6ff;

    /* ── Accents ─────────────────────────────────────────────────────────── */
    --teal:              #22c4c4;
    --teal-deep:         #0fb6b6;
    --orange:            #f59134;
    --orange-deep:       #e07a1c;
    --green:             #16a06d;

    /* ── Neutrals / Text ─────────────────────────────────────────────────── */
    --ink:               #0c1a2e;
    --ink-2:             #324159;
    --ink-3:             #5a6b82;
    --line:              #e6ecf4;
    --bg:                #ffffff;
    --bg-soft:           #f4f7fb;
    --bg-cool:           #eaf1f8;

    /* ── Footer ──────────────────────────────────────────────────────────── */
    --footer-text:       #cfe0ff;
    --footer-text-dim:   #b6cce8;
    --footer-text-dimmer:#9fb6dd;
    --footer-caption:    #8aa1c4;

    /* ── Sale Strip ──────────────────────────────────────────────────────── */
    --sale-bg-start:     #fff8e8;
    --sale-bg-end:       #fff3d6;
    --sale-border:       #ffe7b3;

    /* ── Semantic Aliases ────────────────────────────────────────────────── */
    --color-primary:     var(--navy-800);
    --color-primary-dk:  var(--navy-900);
    --color-accent:      var(--orange);
    --color-accent-hover:var(--orange-deep);
    --color-text:        var(--ink);
    --color-text-soft:   var(--ink-2);
    --color-text-muted:  var(--ink-3);
    --color-border:      var(--line);
    --color-bg:          var(--bg);
    --color-bg-soft:     var(--bg-soft);
    --color-bg-cool:     var(--bg-cool);
    --color-hero-bg:     var(--navy-900);

    /* ── Typography ──────────────────────────────────────────────────────── */
    --font-primary:      'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

    /* Fluid type scale using clamp() — mobile → desktop */
    --text-xs:           clamp(0.75rem,  1vw,   0.813rem);
    --text-sm:           clamp(0.875rem, 1.2vw, 0.938rem);
    --text-base:         clamp(1rem,     1.5vw, 1.063rem);
    --text-md:           clamp(1.063rem, 1.5vw, 1.125rem);
    --text-lg:           clamp(1.125rem, 2vw,   1.25rem);
    --text-xl:           clamp(1.25rem,  2.5vw, 1.5rem);
    --text-2xl:          clamp(1.5rem,   3vw,   2rem);
    --text-3xl:          clamp(1.875rem, 4vw,   2.5rem);
    --text-4xl:          clamp(2.25rem,  5vw,   3.25rem);
    --text-5xl:          clamp(2.75rem,  6vw,   4rem);

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

    /* Line heights */
    --leading-tight:     1.2;
    --leading-snug:      1.35;
    --leading-normal:    1.6;
    --leading-relaxed:   1.75;

    /* Letter spacing */
    --tracking-tight:    -0.02em;
    --tracking-normal:   0;
    --tracking-wide:     0.05em;
    --tracking-wider:    0.1em;

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

    /* ── Layout ──────────────────────────────────────────────────────────── */
    --container-max:     1200px;
    --container-wide:    1400px;
    --container-narrow:  800px;
    --container-pad:     clamp(1rem, 5vw, 2rem);

    /* ── Borders ─────────────────────────────────────────────────────────── */
    --radius-sm:         4px;
    --radius-md:         8px;
    --radius-lg:         12px;
    --radius-xl:         16px;
    --radius-2xl:        24px;
    --radius-full:       9999px;

    /* ── Shadows ─────────────────────────────────────────────────────────── */
    --shadow-sm:         0 1px 3px rgba(12, 26, 46, 0.08);
    --shadow-md:         0 4px 12px rgba(12, 26, 46, 0.1);
    --shadow-lg:         0 8px 24px rgba(12, 26, 46, 0.12);
    --shadow-xl:         0 16px 48px rgba(12, 26, 46, 0.15);

    /* ── Transitions ─────────────────────────────────────────────────────── */
    --transition-fast:   150ms ease;
    --transition-base:   250ms ease;
    --transition-slow:   400ms ease;

    /* ── Z-index ─────────────────────────────────────────────────────────── */
    --z-below:           -1;
    --z-base:            0;
    --z-raised:          10;
    --z-dropdown:        100;
    --z-sticky:          200;
    --z-overlay:         300;
    --z-modal:           400;
    --z-toast:           500;
}