/* ============================================================
   Arapaima — Default Theme
   LOCKED 2026-04-29: A · Aquatic Apex Predator
   Sketch 001 winner. Source-of-truth för efterföljande sketches
   och implementation. Ändra inte värden utan att uppdatera
   .planning/sketches/MANIFEST.md.
   ============================================================ */

:root {
  /* === Colors (Aquatic Apex Predator) === */
  --color-bg: #061a1f;          /* Abyss — page bg */
  --color-bg-elev: #0d2a31;     /* Bg elev 1 (sidebar, cards) */
  --color-surface: #102e35;     /* Surface elev 1 */
  --color-surface-2: #163a43;   /* Surface elev 2 (hover/active) */
  --color-border: #1a4751;      /* Border */
  --color-border-strong: #2a5d68;

  --color-primary: #0f5c70;     /* Petrol — secondary brand hue */
  --color-primary-hover: #0d4a5b;

  --color-accent: #a4ff3c;      /* Apex — CTA + status + glow */
  --color-accent-soft: rgba(164, 255, 60, 0.12);
  --color-accent-glow: rgba(164, 255, 60, 0.35);

  --color-text: #eaf6f3;        /* Foam — primary */
  --color-text-muted: #7a96a0;
  --color-text-dim: #4a6068;

  --color-danger: #ff5e5e;
  --color-warning: #ff9a3c;
  --color-success: var(--color-accent);

  /* === Typography === */
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-sans: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
  --text-5xl: 3rem;
  --text-6xl: 3.75rem;
  --text-7xl: 4.5rem;
  --text-8xl: 6rem;

  --tracking-tight: -0.04em;
  --tracking-normal: 0;
  --tracking-wide: 0.05em;
  --tracking-mono: 0.08em;
  --tracking-mono-loose: 0.16em;

  /* === Spacing === */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* === Radii === */
  --radius-none: 0;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-full: 9999px;

  /* === Shadows === */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.4);
  --shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.5);
  --shadow-glow-accent: 0 0 32px var(--color-accent-glow);
  --shadow-glow-accent-strong: 0 0 48px rgba(164, 255, 60, 0.5);

  /* === Motion === */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 360ms;

  /* === Layout === */
  --grid-overlay-size: 40px;
  --grid-overlay-color: rgba(164, 255, 60, 0.04);
}

/* === Reset === */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  background: var(--color-bg);
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; cursor: pointer; border: 0; background: transparent; color: inherit; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }

/* === Signature primitives (used by sketches) === */
.fin-glyph {
  display: inline-block;
  width: 0.18em; height: 0.18em;
  background: var(--color-accent);
  transform: translateY(-0.6em) skewX(-20deg);
  box-shadow: 0 0 24px var(--color-accent-glow);
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.4); }
}

.live-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 8px var(--color-accent-glow);
  animation: pulse 1.5s ease-in-out infinite;
}