/*
 * myfit - design system.
 * Tutti i parametri grafici sono qui. Le preferenze dell'utente (Impostazioni → Aspetto)
 * sovrascrivono alcune di queste variabili via JavaScript, senza toccare questo file.
 */
:root {
  --font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-scale: 1;
  --title-scale: 1;

  --font-size-xs: calc(13px * var(--font-scale));
  --font-size-sm: calc(15px * var(--font-scale));
  --font-size-base: calc(18px * var(--font-scale));
  --font-size-lg: calc(22px * var(--font-scale));
  --font-size-xl: calc(28px * var(--font-scale) * var(--title-scale));
  --font-size-title: calc(32px * var(--font-scale) * var(--title-scale));
  --line-height: 1.45;

  --color-background: #101318;
  --color-surface: #1b2028;
  --color-surface-alt: #252b35;

  --color-primary: #f97316;
  --color-primary-hover: #ea580c;
  --color-on-primary: #1a0c02;
  --color-button: var(--color-primary);

  --color-text: #f5f5f5;
  --color-muted: #aeb5c0;
  --color-border: #343b46;

  --color-success: #22c55e;
  --color-warning: #f59e0b;
  --color-danger: #ef4444;

  --radius-scale: 1;
  --spacing-scale: 1;

  --button-height: 56px;
  --button-radius: calc(14px * var(--radius-scale));
  --card-radius: calc(18px * var(--radius-scale));
  --modal-radius: calc(20px * var(--radius-scale));
  --chip-radius: calc(999px * var(--radius-scale));

  --spacing-xs: calc(4px * var(--spacing-scale));
  --spacing-sm: calc(8px * var(--spacing-scale));
  --spacing-md: calc(16px * var(--spacing-scale));
  --spacing-lg: calc(24px * var(--spacing-scale));
  --spacing-xl: calc(32px * var(--spacing-scale));

  --content-width: 640px;
  --tabbar-height: 64px;
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--color-primary) 60%, transparent);
  color-scheme: dark;
}

/* Tema chiaro */
:root[data-theme="light"] {
  --color-background: #f3f4f6;
  --color-surface: #ffffff;
  --color-surface-alt: #e8eaee;
  --color-text: #14181f;
  --color-muted: #555e6b;
  --color-border: #d3d7de;
  --color-primary: #c2410c;
  --color-primary-hover: #9a3412;
  --color-on-primary: #ffffff;
  --color-success: #15803d;
  --color-warning: #b45309;
  --color-danger: #b91c1c;
  color-scheme: light;
}