/*
 * Field Guide Marina — Design Tokens
 * v8.0.0 — All CSS custom properties per design-spec.md §3
 *
 * --brand is injected by PHP (FGM_Brand::output_css_variables).
 * Every other brand-derived token computes via color-mix().
 */

:root {

  /* ── 1. Brand (derived from --brand, set by PHP) ─────────── */

  --brand-soft:  color-mix(in srgb, var(--brand)  8%, white);
  --brand-mid:   color-mix(in srgb, var(--brand) 18%, white);
  --brand-ink:   color-mix(in srgb, var(--brand) 35%, black);
  --block-bg:    color-mix(in srgb, var(--brand)  5%, white);
  --row-stripe:  color-mix(in srgb, var(--brand)  2.5%, white);
  --row-hover:   color-mix(in srgb, var(--brand)  8%, white);

  /* ── 2. Semantic colors (fixed, never change per brand) ──── */

  --ok-dot:      #1F9554;
  --warn-dot:    #D9830F;
  --bad-dot:     #CC3B23;
  --vacant-dot:  #6B8394;

  --num-ok:      #15703D;
  --num-warn:    #A66309;
  --num-bad:     #9B2816;

  --warn-bg:     #F3E6D4;
  --warn-ink:    #7A4718;
  --warn-stroke: rgba(198, 122, 58, 0.22);

  /* ── 3. Neutrals ─────────────────────────────────────────── */

  --bg:          #F9F9F7;
  --bg-soft:     #F5F0E6;
  --fg:          #1A1E21;
  --fg-2:        #5F6B72;
  --fg-3:        #9AA2A8;
  --line:        rgba(26, 30, 33, 0.08);
  --line-strong: rgba(26, 30, 33, 0.14);

  /* ── 4. Map-specific ─────────────────────────────────────── */

  --water:       color-mix(in srgb, var(--brand)  7%, #EEF2F0);
  --water-deep:  color-mix(in srgb, var(--brand) 12%, #DDE4E3);
  --shore:       #E8DFC9;
  --dock:        #C9B992;
  --dock-ink:    #5C4A2A;

  /* ── 5. Radius scale ─────────────────────────────────────── */

  --radius-sm:    2px;
  --radius-md:    3px;
  --radius-lg:    4px;
  --radius-xl:    6px;
  --radius-round: 50%;

  /* ── 6. Shadow scale ─────────────────────────────────────── */

  --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md:  0 4px 12px rgba(0, 0, 0, 0.06);
  --shadow-lg:  0 12px 40px rgba(0, 0, 0, 0.15);
  --shadow-fab: 0 6px 18px color-mix(in srgb, var(--brand) 30%, transparent);

  /* ── 7. Spacing scale (8px-anchored, 4px granularity) ───── */

  --space-1:   4px;
  --space-2:   8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  32px;
  --space-8:  40px;
  --space-9:  48px;
  --space-10: 56px;
  --space-11: 64px;
  --space-12: 72px;

  /* ── 8. Typography tokens ────────────────────────────────── */

  --font-family: 'Inter Variable', Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

  --weight-regular: 400;
  --weight-medium:  500;

  /* ── 9. Legacy aliases (v7 → v8 bridge) ──────────────────── */

  --fgm-text:           var(--fg);
  --fgm-text-secondary: var(--fg-2);
  --fgm-text-light:     var(--fg-3);
  --fgm-bg:             var(--bg);
  --fgm-bg-card:        #fff;
  --fgm-border:         var(--line);
  --fgm-brand-light:    var(--brand-soft);
  --fgm-brand-dark:     var(--brand-ink);
  --fgm-success:        var(--ok-dot);
  --fgm-warning:        var(--warn-dot);
  --fgm-danger:         var(--bad-dot);
  --fgm-info:           var(--vacant-dot);
  --fgm-radius:         var(--radius-lg);
  --fgm-radius-lg:      var(--radius-lg);
  --fgm-shadow:         var(--shadow-sm);
  --fgm-shadow-sm:      var(--shadow-sm);
  --fgm-shadow-md:      var(--shadow-md);
  --fgm-shadow-lg:      var(--shadow-lg);
  --fgm-transition:     0.15s ease;
}