/* ═══════════════════════════════════════════════════════════
   DESIGN TOKENS
   Single source of truth for all colours, spacing, shape,
   shadow and motion values. Edit here, propagates everywhere.
   ═══════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }

:root {
    /* ── Colours ─────────────────────────────────────────── */
    --color-primary:       #1a5632;
    --color-primary-dark:  #113d23;
    --color-primary-light: #e8f5ee;
    --color-primary-mid:   #2d7a4f;

    --color-text:          #111827;
    --color-text-muted:    #6b7280;
    --color-text-light:    #9ca3af;

    --color-bg:            #ffffff;
    --color-bg-page:       #f5f5f3;
    --color-bg-card:       #ffffff;

    --color-border:        #e5e7eb;
    --color-border-focus:  #1a5632;

    --color-success:       #15803d;
    --color-success-bg:    #f0fdf4;
    --color-danger:        #dc2626;
    --color-danger-bg:     #fef2f2;
    --color-amber:         #92400e;
    --color-amber-bg:      #fffbeb;
    --color-blue:          #1d4ed8;
    --color-blue-bg:       #eff6ff;

    /* ── Typography ──────────────────────────────────────── */
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    --font-mono: "JetBrains Mono", "Fira Code", ui-monospace, monospace;

    /* ── Spacing scale (4-point grid) ────────────────────── */
    --space-xs:  0.25rem;  /*  4px */
    --space-sm:  0.5rem;   /*  8px */
    --space-md:  1rem;     /* 16px */
    --space-lg:  1.5rem;   /* 24px */
    --space-xl:  2.5rem;   /* 40px */
    --space-2xl: 4rem;     /* 64px */

    /* ── Shape ───────────────────────────────────────────── */
    --radius:    10px;
    --radius-sm: 6px;
    --radius-lg: 14px;

    /* ── Shadows ─────────────────────────────────────────── */
    --shadow-sm: 0 1px 3px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.05);
    --shadow-md: 0 4px 12px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.05);
    --shadow-lg: 0 8px 32px rgba(0,0,0,.18), 0 2px 8px rgba(0,0,0,.08);

    /* ── Overlays ─────────────────────────────────────────── */
    --backdrop-bg: rgba(0,0,0,.45);

    /* ── Motion ──────────────────────────────────────────── */
    --transition-fast: 0.15s;
    --transition-med:  0.2s;
}