/* ==========================================================================
   VibraVid UI — design tokens (stessa palette calda del portale "Casa")
   Tutti i colori, i raggi, le ombre e i tempi vivono qui.
   Il tema scuro è il default; quello chiaro si attiva con <html data-theme="light">
   (lo imposta static/js/theme.js: segue il sistema oppure la scelta manuale).
   ========================================================================== */

:root {
  color-scheme: dark;

  /* ── Tipografia ───────────────────────────────────────────────────── */
  --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --font-mono: ui-monospace, "JetBrains Mono", SFMono-Regular, Menlo, Consolas, monospace;

  /* ── Superfici ────────────────────────────────────────────────────── */
  --bg: #1d1916;
  --surface: #28221e;
  --surface-2: #302923;
  --surface-solid: #28221e;
  --topbar-bg: rgba(29, 25, 22, 0.86);
  --border: #3b332c;
  --border-strong: #54493f;
  --grid: transparent;
  --sheen: rgba(255, 240, 225, 0.08);

  /* ── Testo ────────────────────────────────────────────────────────── */
  --text: #efe5d8;
  --text-2: #b9aa99;
  --text-3: #8d7f70;
  --on-accent: #2a1c12;

  /* ── Accenti ──────────────────────────────────────────────────────── */
  --accent: #de9a6b;
  --accent-rgb: 222 154 107;
  --accent-2: #e0b058;
  --accent-2-rgb: 224 176 88;
  --grad: linear-gradient(var(--accent), var(--accent));
  --grad-soft: linear-gradient(rgb(var(--accent-rgb) / 0.16), rgb(var(--accent-rgb) / 0.16));

  /* ── Stati ────────────────────────────────────────────────────────── */
  --success: #8ab583;
  --success-rgb: 138 181 131;
  --warn: #dcae4f;
  --warn-rgb: 220 174 79;
  --danger: #de7a68;
  --danger-rgb: 222 122 104;
  --info: #8fb0c4;
  --info-rgb: 143 176 196;

  /* ── Aurora (sfondo animato) ──────────────────────────────────────── */
  --aurora-1: transparent;
  --aurora-2: transparent;
  --aurora-3: transparent;

  /* ── Forme ────────────────────────────────────────────────────────── */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 18px;
  --r-xl: 22px;
  --r-pill: 999px;

  /* ── Ombre ────────────────────────────────────────────────────────── */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 10px rgba(0, 0, 0, 0.18);
  --shadow-md: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 22px rgba(0, 0, 0, 0.28);
  --shadow-lg: 0 2px 4px rgba(0, 0, 0, 0.35), 0 18px 44px rgba(0, 0, 0, 0.45);

  /* ── Movimento ────────────────────────────────────────────────────── */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast: 140ms;
  --t: 260ms;
  --t-slow: 520ms;

  /* ── Misure di layout ─────────────────────────────────────────────── */
  --header-h: 68px;
  --side-w: 400px;
  --dock-h: 0px;
  --blur: 18px;
}

/* ── Tema chiaro ─────────────────────────────────────────────────────── */
/* (chiaro: crema e terracotta) */
:root[data-theme="light"] {
  color-scheme: light;

  --bg: #f6efe6;
  --surface: #fffaf3;
  --surface-2: #f8f0e4;
  --surface-solid: #fffaf3;
  --topbar-bg: rgba(246, 239, 230, 0.86);
  --border: #e4d6c4;
  --border-strong: #cdb99f;
  --grid: transparent;
  --sheen: rgba(255, 255, 255, 0.7);

  --text: #3a2f27;
  --text-2: #6b5b4d;
  --text-3: #8f7e6e;
  --on-accent: #fffaf3;

  --accent: #c2693d;
  --accent-rgb: 194 105 61;
  --accent-2: #a9761b;
  --accent-2-rgb: 169 118 27;
  --grad: linear-gradient(var(--accent), var(--accent));
  --grad-soft: linear-gradient(rgb(var(--accent-rgb) / 0.11), rgb(var(--accent-rgb) / 0.11));

  --success: #5f8a5a;
  --success-rgb: 95 138 90;
  --warn: #b27a1a;
  --warn-rgb: 178 122 26;
  --danger: #b84f3e;
  --danger-rgb: 184 79 62;
  --info: #4f7a92;
  --info-rgb: 79 122 146;

  --aurora-1: transparent;
  --aurora-2: transparent;
  --aurora-3: transparent;

  --shadow-sm: 0 1px 2px rgba(80, 52, 30, 0.06), 0 3px 10px rgba(80, 52, 30, 0.06);
  --shadow-md: 0 1px 2px rgba(80, 52, 30, 0.06), 0 6px 18px rgba(80, 52, 30, 0.08);
  --shadow-lg: 0 2px 4px rgba(80, 52, 30, 0.08), 0 16px 40px rgba(80, 52, 30, 0.16);
}

/* ── Su mobile compare la "dock" dei download in basso ───────────────── */
@media (max-width: 1023.98px) {
  :root { --dock-h: 0px; }
  body.has-jobs { --dock-h: 72px; }
}