/* ==========================================
   FANU · DESIGN TOKENS
   Single source of truth for all design values.
   Change a value here → it updates everywhere.
   ========================================== */

:root {
  /* Background layers (dark theme) */
  --bg-0: #000000;
  --bg-1: #0a0a0c;
  --bg-2: #131316;
  --bg-3: #1c1c20;

  /* Translucent surfaces (for overlays / cards on top of map) */
  --surface: rgba(28, 28, 32, 0.72);
  --surface-elevated: rgba(38, 38, 44, 0.92);

  /* Hairline borders — Apple-style very subtle dividers */
  --hairline: rgba(255, 255, 255, 0.08);
  --hairline-strong: rgba(255, 255, 255, 0.16);

  /* Text hierarchy */
  --text: #f5f5f7;
  --text-2: rgba(245, 245, 247, 0.72);
  --text-3: rgba(245, 245, 247, 0.48);
  --text-4: rgba(245, 245, 247, 0.32);

  /* Brand & system colors (Apple-inspired ocean palette) */
  --accent: #ff9f0a;        /* Sunset orange */
  --accent-2: #ffd60a;      /* Sun yellow */
  --tide: #64d2ff;          /* Cyan — tides & water */
  --good: #30d158;          /* Green — go fish */
  --warn: #ff453a;          /* Red — warnings */
  --neutral: #98989f;       /* Gray */

  /* Border radius scale */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-xl: 32px;

  /* Spacing rhythm (use multiples) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  /* Shadows — depth without heaviness */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 0 0 0.5px var(--hairline);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 0 0.5px var(--hairline);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.6), 0 0 0 0.5px var(--hairline);

  /* Glass effects */
  --blur: 30px;

  /* Safe area insets for notched phones */
  --safe-top: env(safe-area-inset-top, 0);
  --safe-bottom: env(safe-area-inset-bottom, 0);

  /* Motion timing */
  --ease-out: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==========================================
   LIGHT THEME — overrides for daylight use
   ========================================== */
[data-theme="light"] {
  --bg-0: #fbfbfd;
  --bg-1: #ffffff;
  --bg-2: #f5f5f7;
  --bg-3: #ebebef;

  --surface: rgba(255, 255, 255, 0.78);
  --surface-elevated: rgba(255, 255, 255, 0.96);

  --hairline: rgba(0, 0, 0, 0.08);
  --hairline-strong: rgba(0, 0, 0, 0.16);

  --text: #1d1d1f;
  --text-2: rgba(29, 29, 31, 0.72);
  --text-3: rgba(29, 29, 31, 0.5);
  --text-4: rgba(29, 29, 31, 0.32);

  --accent: #ff8c00;
  --accent-2: #d97706;
  --tide: #0a84ff;
  --good: #28a745;
  --warn: #d70015;
  --neutral: #6e6e73;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05), 0 0 0 0.5px var(--hairline);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.08), 0 0 0 0.5px var(--hairline);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.12), 0 0 0 0.5px var(--hairline);
}