/* ==========================================================================
   Content Watch Maps — Design tokens
   Derived from "Thibaut Loubère — Design System" (V1, juin 2026).
   Components consume the semantic aliases, never the raw values.
   ========================================================================== */

:root {
    /* ---- Raw palette ---------------------------------------------------- */
    --tl-teal:         #0F3B40;
    --tl-teal-deep:    #0B2E32;
    --tl-cream:        #F5F1E8;
    --tl-cream-bright: #FFFDF7;
    --tl-white:        #FFFFFF;

    --tl-lime:         #C7F046;
    --tl-mint:         #34DDA9;
    --tl-pink:         #F4B9D2;
    --tl-pink-strong:  #F58FB0;

    --tl-ink:          #0F2E32;
    --tl-ink-soft:     #5C7173;

    /* ---- Semantic aliases (used by components) ------------------------- */
    --surface-dark:        var(--tl-teal);
    --surface-dark-deep:   var(--tl-teal-deep);
    --surface-cream:       var(--tl-cream);
    --surface-cream-bright:var(--tl-cream-bright);
    --surface-card:        var(--tl-white);

    --text-strong:   var(--tl-ink);
    --text-body:     var(--tl-ink);
    --text-soft:     var(--tl-ink-soft);
    --text-on-dark:  var(--tl-cream);

    --accent-primary:   var(--tl-mint);
    --accent-hover:     var(--tl-lime);
    --accent-highlight: var(--tl-lime);
    --accent-scribble:  var(--tl-pink-strong);

    --border-soft: rgba(15, 59, 64, 0.10);
    --border-hard: rgba(15, 59, 64, 0.18);

    /* ---- Typography ---------------------------------------------------- */
    --font-display: "Bricolage Grotesque", "Inter", system-ui, sans-serif;
    --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

    /* ---- Spacing (4px base) ------------------------------------------- */
    --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
    --space-5: 20px;  --space-6: 24px;  --space-8: 32px;  --space-10: 40px;
    --space-12: 48px; --space-16: 64px; --space-20: 80px;
    --space-section: clamp(64px, 9vw, 120px);

    /* ---- Layout ------------------------------------------------------- */
    --max-width:        1200px;
    --max-width-narrow: 780px;
    --gutter:           clamp(20px, 4vw, 40px);

    /* ---- Radii -------------------------------------------------------- */
    --radius-sm: 14px;
    --radius:    16px;
    --radius-lg: 24px;
    --radius-pill: 999px;

    /* ---- Shadows ------------------------------------------------------ */
    --shadow-card: 0 1px 2px rgba(15, 59, 64, 0.04), 0 12px 28px rgba(15, 59, 64, 0.10);
    --shadow-soft: 0 1px 2px rgba(15, 59, 64, 0.04), 0 6px 16px rgba(15, 59, 64, 0.07);
    --shadow-mint: 0 10px 24px rgba(52, 221, 169, 0.35);

    /* ---- Motion ------------------------------------------------------- */
    --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --transition:      250ms;
    --transition-slow: 400ms;
}