/* Catches Web UI — Design Tokens
 * Single source of truth for color, type, spacing, radius, motion.
 * All four sites (catches.world, fishid.catches.world, fishid/server,
 * dataset.catches.world) should resolve these values identically.
 */

:root {
  /* Surfaces */
  --bg:           #08080A;
  --surface:      #0F1318;
  --card:         #141920;
  --card-hover:   #1A2232;

  /* Accent (brand) */
  --accent:       #00C9A7;
  --accent-hover: #00E8C2;
  --accent-glow:  rgba(0, 201, 167, 0.35);
  --accent-dim:   rgba(0, 201, 167, 0.12);
  --border-hi:    rgba(0, 201, 167, 0.28);

  /* Semantic */
  --blue:        #4FC3F7;
  --blue-dim:    rgba(79, 195, 247, 0.12);
  --warn:        #F6AD55;
  --warn-dim:    rgba(246, 173, 85, 0.12);
  --danger:      #F05252;
  --danger-dim:  rgba(240, 82, 82, 0.12);
  --gold:        #F7C04F;
  --gold-dim:    rgba(247, 192, 79, 0.14);

  /* Text */
  --text:    #F0F4F8;
  --muted:   #7A8A9A;
  --faint:   #2E3D4E;
  --border:  rgba(255, 255, 255, 0.06);

  /* Type */
  --ff-display: 'Fraunces', Georgia, serif;
  --ff-body:    'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --ff-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* Radius */
  --radius-sm:  6px;
  --radius-md:  8px;
  --radius-lg: 12px;
  --radius-xl: 18px;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 0.2s;
  --dur-base: 0.3s;
  --dur-slow: 0.55s;

  /* Layout */
  --nav-h: 56px;
}