/*
  Brainfall — design tokens
  ---------------------------------------------------------------
  Palette scelta apposta per non cadere nei due default che si
  vedono ovunque nel 2026 (crema+terracotta, o nero+accento acido):
  un teal freddo ("circuit"), preso dal gradiente del logo Brainfall,
  abbinato a un ambra caldo usato SOLO per lo stato attivo della
  pipeline ("droplet") — la stessa metafora del logo (circuiti che
  diventano gocce che cadono a cascata).
*/

:root {
  /* ---- Colore: base (tema chiaro) ---- */
  --canvas: #FAFAF9;
  --surface: #FFFFFF;
  --surface-raised: #FFFFFF;
  --ink: #14151A;
  --ink-muted: #6B6D76;
  --ink-faint: #9799A3;
  --border: #E8E6E1;
  --border-strong: #D8D5CE;

  --brand: #186080;
  --brand-hover: #124C66;
  --brand-ink: #FFFFFF;
  --brand-wash: #E6F1F4;

  --signal: #E9A23B;
  --signal-wash: #FBEEDA;

  --success: #2F9E6E;
  --success-wash: #E4F4EC;
  --danger: #D0483F;
  --danger-wash: #FBEAE8;

  --focus-ring: rgba(24, 96, 128, 0.35);

  /* ---- Tipografia ---- */
  --font-display: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

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

  /* ---- Raggi ---- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-full: 999px;

  /* ---- Ombre: leggerissime, mai pesanti ---- */
  --shadow-xs: 0 1px 2px rgba(20, 21, 26, 0.04);
  --shadow-sm: 0 2px 8px rgba(20, 21, 26, 0.05);
  --shadow-md: 0 8px 24px rgba(20, 21, 26, 0.07);
  --shadow-focus: 0 0 0 3px var(--focus-ring);

  /* ---- Animazione: sempre leggera ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 150ms;
  --duration-base: 200ms;
  --duration-slow: 250ms;
}

[data-theme='dark'] {
  --canvas: #0D0E12;
  --surface: #17181D;
  --surface-raised: #1D1F26;
  --ink: #EDEEF2;
  --ink-muted: #9497A3;
  --ink-faint: #6B6D76;
  --border: #262832;
  --border-strong: #33353F;

  --brand: #207C94;
  --brand-hover: #2E93AC;
  --brand-ink: #FFFFFF;
  --brand-wash: #15282D;

  --signal: #F0B155;
  --signal-wash: #332A17;

  --success: #3DB37E;
  --success-wash: #17301F;
  --danger: #E36767;
  --danger-wash: #35201E;

  --focus-ring: rgba(32, 124, 148, 0.4);

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.24);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.28);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.36);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --duration-slow: 0ms;
  }
}