/* ==========================================================================
   MapX Design Tokens — v1 (design review)
   Replaces the beige system (#faf9f6 / #ece5d4) with a light, green-accented
   studio look. Mockups in design/ use these values inline; this file is the
   canonical reference for implementation.
   ========================================================================== */

:root {
  /* ---- Brand ---- */
  --mx-brand:        #5f8d74;  /* primary green (existing) */
  --mx-brand-dark:   #0c6457;  /* hover / emphasis (existing) */
  --mx-brand-tint:   #e3f1ee;  /* selected / soft fills (existing) */
  --mx-brand-tint-2: #d3e8e1;  /* tint hover */

  /* ---- Surfaces (white / very light gray — no beige) ---- */
  --mx-bg:           #f7f8f7;  /* app background */
  --mx-surface:      #ffffff;  /* cards, panels, toolbar */
  --mx-surface-2:    #f2f4f2;  /* wells, canvas gutter, input bg */
  --mx-backdrop:     rgba(24, 34, 29, 0.45); /* modal scrim */

  /* ---- Text ---- */
  --mx-text:         #212b26;
  --mx-text-muted:   #68736d;
  --mx-text-faint:   #9aa49e;
  --mx-text-on-brand:#ffffff;

  /* ---- Lines ---- */
  --mx-border:       #e6e9e7;
  --mx-border-strong:#d5dad7;

  /* ---- States ---- */
  --mx-danger:       #b3564d;
  --mx-focus-ring:   0 0 0 3px rgba(95, 141, 116, 0.25);

  /* ---- Elevation (soft) ---- */
  --mx-shadow-1: 0 1px 2px rgba(18, 32, 26, 0.05), 0 2px 8px rgba(18, 32, 26, 0.05);
  --mx-shadow-2: 0 2px 6px rgba(18, 32, 26, 0.06), 0 8px 24px rgba(18, 32, 26, 0.08);
  --mx-shadow-3: 0 4px 12px rgba(18, 32, 26, 0.08), 0 16px 48px rgba(18, 32, 26, 0.14);

  /* ---- Radius ---- */
  --mx-radius:       8px;      /* default: buttons, cards, inputs, chips */
  --mx-radius-lg:    12px;     /* large modals, artboard frame */
  --mx-radius-full:  999px;    /* pills, circular quick actions */

  /* ---- Spacing (compact, 4px base) ---- */
  --mx-space-1: 4px;
  --mx-space-2: 8px;
  --mx-space-3: 12px;
  --mx-space-4: 16px;
  --mx-space-5: 20px;
  --mx-space-6: 24px;
  --mx-space-8: 32px;

  /* ---- Type ---- */
  --mx-font-ui:      'Montserrat', system-ui, sans-serif;
  --mx-font-display: 'Playfair Display', Georgia, serif;
  --mx-fs-11: 11px;  /* badges, rail labels */
  --mx-fs-12: 12px;  /* meta, captions */
  --mx-fs-13: 13px;  /* body / controls */
  --mx-fs-14: 14px;  /* card titles, inputs */
  --mx-fs-16: 16px;  /* section headings */
  --mx-fs-28: 28px;  /* page display heading (Playfair) */

  /* ---- Components ---- */
  --mx-icon-btn-size: 32px;    /* clean icon buttons; hover bg var(--mx-surface-2) */
  --mx-control-h:     32px;    /* compact inputs / chips */
  --mx-button-h:      40px;    /* primary buttons */
  --mx-sidebar-w:     236px;
  --mx-sidebar-w-collapsed: 64px;
  --mx-rail-w:        68px;    /* editor icon rail */
  --mx-flyout-w:      320px;   /* editor flyout panel (300–340 safe range) */
  --mx-inspector-w:   264px;
}