/* ═══════════════════════════════════════════════════
   CHAMOKIDE — Design System Foundation
   Single source of truth for all design tokens.
   Load this file FIRST so variables cascade everywhere.
═══════════════════════════════════════════════════ */

:root {

    /* ── Primary colour ── */
    --c-primary:        #e67e22;
    --c-primary-hover:  #cf6d17;
    --c-primary-light:  #fff8f2;
    --c-primary-glow:   rgba(230, 126, 34, 0.18);
    --c-primary-rgb:    230, 126, 34;

    /* ── Text ── */
    --c-text:       #1a1a1a;
    --c-text-2:     #444;
    --c-text-3:     #666;
    --c-text-muted: #999;

    /* ── Backgrounds ── */
    --c-bg:        #ffffff;
    --c-bg-soft:   #f8f9fa;
    --c-bg-subtle: #f5f5f5;

    /* ── Border ── */
    --c-border: #ebebeb;

    /* ── Status ── */
    --c-success: #10b981;
    --c-danger:  #e74c3c;
    --c-warning: #f59e0b;

    /* ══ Border radius — 4 levels only ══
       xs  → badges, small chips
       sm  → inputs, small buttons
       md  → cards, panels, modals
       lg  → large hero cards
       pill→ quantity controls, tags
    ───────────────────────────────────── */
    --r-xs:   6px;
    --r-sm:   8px;
    --r-md:   12px;
    --r-lg:   16px;
    --r-pill: 50px;

    /* ══ Shadows — 3 levels ══ */
    --s-sm:      0 2px 8px  rgba(0, 0, 0, 0.06);
    --s-md:      0 4px 16px rgba(0, 0, 0, 0.09);
    --s-lg:      0 8px 32px rgba(0, 0, 0, 0.14);
    --s-primary: 0 4px 14px rgba(230, 126, 34, 0.25);

    /* ══ Type scale — 7 steps (rem) ══
       xs   → 12px  labels, micro-copy
       sm   → 14px  secondary text, captions
       base → 16px  body text
       lg   → 18px  lead text
       xl   → 22px  sub-headings
       2xl  → 28px  section titles
       3xl  → 36px  page headings
    ───────────────────────────────────── */
    --text-xs:   0.75rem;
    --text-sm:   0.875rem;
    --text-base: 1rem;
    --text-lg:   1.125rem;
    --text-xl:   1.375rem;
    --text-2xl:  1.75rem;
    --text-3xl:  2.25rem;

    /* ══ Spacing — 8px base grid ══ */
    --sp-1:  4px;
    --sp-2:  8px;
    --sp-3:  12px;
    --sp-4:  16px;
    --sp-5:  24px;
    --sp-6:  32px;
    --sp-7:  48px;
    --sp-8:  64px;

    /* ── Font weights ── */
    --fw-normal:  400;
    --fw-medium:  600;
    --fw-bold:    700;
    --fw-black:   800;

    /* ── Transitions ── */
    --ease-fast:   0.15s ease;
    --ease-normal: 0.25s ease;
    --ease-slow:   0.4s ease;
}