/*
 * Design Tokens — Camping Alert Trail Guide (Design B)
 * All CSS custom properties live here. No hardcoded values in other CSS files.
 * Based on design.md §2 and §4.
 */

:root {
    /* ─── Brand Colors ─── */
    --color-forest-black:   #001e2b;
    --color-evergreen:      #00684a;
    --color-spring-green:   #00ed64;
    --color-sage:           #b8c4c2;
    --color-mist:           #e8edeb;
    --color-white:          #ffffff;

    /* ─── State / Status Colors ─── */
    --color-open:           #00ed64;
    --color-open-bg:        #e6fff2;
    --color-open-border:    #b3f0d0;
    --color-watching:       #00684a;
    --color-watching-bg:    #e6f4ef;
    --color-triggered:      #f59e0b;
    --color-triggered-bg:   #fef3c7;
    --color-paused:         #94a3b8;
    --color-paused-bg:      #f1f5f9;
    --color-full:           #ef4444;
    --color-full-bg:        #fee2e2;

    /* ─── Background Layers ─── */
    --bg-dark:              var(--color-forest-black);
    --bg-panel:             var(--color-white);
    --bg-muted:             #f4f6f5;
    --bg-hover:             #f0f4f2;

    /* ─── Border ─── */
    --border-color:         #b8c4c2;
    --border-color-strong:  #6b7c78;
    --border-radius-sm:     8px;
    --border-radius-md:     12px;
    --border-radius-lg:     16px;
    --border-radius-xl:     20px;
    --border-radius-pill:   9999px;

    /* ─── Shadows ─── */
    --shadow-sm:  0 1px 4px rgba(0, 30, 43, 0.08);
    --shadow-md:  0 4px 16px rgba(0, 30, 43, 0.12);
    --shadow-lg:  0 8px 32px rgba(0, 30, 43, 0.16);
    --shadow-forest: 0 4px 24px rgba(0, 30, 43, 0.20);

    /* ─── Typography: Fonts ─── */
    --font-display:  'Playfair Display', Georgia, serif;
    --font-body:     'DM Sans', system-ui, -apple-system, sans-serif;
    --font-mono:     'Source Code Pro', 'Fira Mono', monospace;

    /* ─── Typography: Scale ─── */
    --text-xs:   0.625rem;   /* 10px */
    --text-sm:   0.8125rem;  /* 13px */
    --text-base: 1rem;       /* 16px */
    --text-md:   1.125rem;   /* 18px */
    --text-lg:   1.25rem;    /* 20px */
    --text-xl:   1.5rem;     /* 24px */
    --text-2xl:  2rem;       /* 32px */
    --text-3xl:  3rem;       /* 48px */
    --text-4xl:  4.5rem;     /* 72px */

    /* ─── Typography: Weights ─── */
    --weight-light:    300;
    --weight-regular:  400;
    --weight-medium:   500;
    --weight-semibold: 600;
    --weight-bold:     700;

    /* ─── Spacing ─── */
    --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-24:  96px;

    /* ─── Layout ─── */
    --nav-height:    96px;
    --content-max:   1280px;
    --content-wide:  1440px;
    --content-narrow: 768px;

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

    /* ─── Z-index ─── */
    --z-below:    -1;
    --z-base:      0;
    --z-above:    10;
    --z-nav:     100;
    --z-modal:   200;
    --z-toast:   300;
}