/* ========================================
   Design Tokens — MysticSwell
   ========================================
   Single source of truth for visual identity.
   All component styles reference via var(--token).
   ======================================== */

:root {
    /* ---- Brand Colors ---- */
    --bg-page: #f5f2eb;          /* Warm sandy off-white — beach sand */
    --bg-dark: #0f1d2e;          /* Deep ocean navy — nav, footer, hero */
    --bg-teal: #0e7490;          /* Ocean teal — primary accent areas */
    --text-on-dark: #e8e2d6;     /* Warm light text on dark backgrounds */
    --text-accent: #0ea5c6;      /* Bright coastal blue — links, highlights */
    --text-muted: #6b6358;       /* Sandy brown-gray — labels, secondary text */

    /* ---- Status Colors (Safety-Critical — WCAG AA) ---- */
    --bg-safe: #1a6b3c;          /* Dark green — safe conditions */
    --bg-warning: #a0540e;       /* Amber/orange — caution */
    --bg-unsafe: #b83224;        /* Rust red — danger */

    --status-safe: #16a34a;      /* WCAG AA green */
    --status-unsafe: #dc2626;    /* WCAG AA red */
    --status-caution: #d97706;   /* WCAG AA amber */

    /* ---- Semantic Alert Colors ---- */
    --color-safe-bg: #f0fdf4;
    --color-safe-border: #22c55e;
    --color-safe-text: #166534;
    --color-safe-text-light: #15803d;

    --color-danger-bg: #fef2f2;
    --color-danger-border: #ef4444;
    --color-danger-text: #991b1b;
    --color-danger-text-light: #dc2626;

    --color-warning-bg: #fff7ed;
    --color-warning-border: #f97316;
    --color-warning-text: #9a3412;
    --color-warning-text-light: #ea580c;

    --color-info-bg: #eff6ff;
    --color-info-border: #3b82f6;
    --color-info-text: #1e40af;
    --color-info-text-light: #2563eb;

    /* ---- Accent / Domain-specific ---- */
    --tide-high: #0e7490;
    --tide-high-bg: #d4e8ec;
    --tide-low: #9e8e6e;

    /* ---- Typography ---- */
    --font-display: 'Fraunces', Georgia, serif;
    --font-body: 'DM Sans', system-ui, sans-serif;

    /* ---- Spacing (8px baseline grid) ---- */
    --spacing-xs: 8px;
    --spacing-sm: 16px;
    --spacing-md: 20px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-2xl: 48px;

    /* ---- Border Radius ---- */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;

    /* ---- Card Padding ---- */
    --card-padding: var(--spacing-lg);
    --card-padding-mobile: var(--spacing-md);
}