/* Flooka design tokens — from the brand charter v0.12 (27 Oct 2026). */
:root {
  /* core colours */
  --fk-cobalt: #1737D1;      /* primary brand */
  --fk-sailcloth: #F6F0E5;   /* main canvas */
  --fk-midnight: #10213C;    /* text and depth */
  --fk-vermilion: #F26044;   /* small accent — never a field, never text on light grounds */
  --fk-sea-foam: #DCE8F4;    /* quiet panels */
  --fk-slate: #546477;       /* secondary text */
  --fk-apricot: #FFB398;     /* highlights and eyebrows on cobalt */
  --fk-blush: #F1B09C;       /* warm section tint */

  /* semantic — sailcloth theme (default) */
  --surface: var(--fk-sailcloth);
  --surface-quiet: var(--fk-sea-foam);
  --ink: var(--fk-midnight);
  --ink-muted: var(--fk-slate);
  --ink-accent: var(--fk-cobalt);
  --rule: rgba(16, 33, 60, 0.16);
  --action: var(--fk-cobalt);
  --on-action: var(--fk-sailcloth);
  --focus: var(--fk-cobalt);

  /* type */
  --font-display: 'URW Gothic', 'URW Gothic L', 'Poppins', sans-serif;
  --font-sans: 'Nimbus Sans', 'Nimbus Sans L', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-mono: 'Nimbus Mono PS', 'Nimbus Mono L', 'Courier Prime', 'Courier New', monospace;

  /* spacing scale (space-4 … space-96) */
  --space-4: 4px; --space-8: 8px; --space-12: 12px; --space-16: 16px; --space-24: 24px;
  --space-32: 32px; --space-48: 48px; --space-64: 64px; --space-96: 96px;
  --page-margin: 6%;
  --radius-0: 0;
  --duration-base: 220ms;
}

/* cobalt theme: brand sections, hero, closing */
[data-theme="cobalt"] {
  --surface: var(--fk-cobalt);
  --surface-quiet: rgba(246, 240, 229, 0.08);
  --ink: var(--fk-sailcloth);
  --ink-muted: var(--fk-sea-foam);
  --ink-accent: var(--fk-apricot);
  --rule: rgba(246, 240, 229, 0.3);
  --action: var(--fk-sailcloth);
  --on-action: var(--fk-cobalt);
  --focus: var(--fk-apricot);
}

html { background: var(--fk-sailcloth); }
body { margin: 0; font-family: var(--font-sans); color: var(--fk-midnight); -webkit-font-smoothing: antialiased; }
img { align-self: flex-start; flex: none; max-width: 100%; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }