/* ===================================================================
   SARA MASSOTERAPIA — Design tokens
   Fonte di verità per colori, tipografia, spacing, radius, shadow, motion.
   Ogni CSS dell'area riservata legge da qui. Mai valori hardcoded.
   =================================================================== */

:root {
  /* ========== BRAND ========== */
  --color-brand-teal-50:  #E8F1ED;
  --color-brand-teal-100: #C7DDD3;
  --color-brand-teal-400: #5C998A;
  --color-brand-teal-600: #2E6B5B;  /* primary */
  --color-brand-teal-800: #1F554A;

  --color-brand-ocra-50:  #FBF1DE;
  --color-brand-ocra-100: #F5DBA8;
  --color-brand-ocra-500: #D99E3F;
  --color-brand-ocra-700: #A87418;
  --color-brand-ocra-800: #7A5520;  /* dark text on ocra bg */

  --color-brand-primary: var(--color-brand-teal-600);
  --color-brand-primary-hover: var(--color-brand-teal-800);
  --color-brand-secondary: var(--color-brand-ocra-500);

  /* ========== NEUTRALS ========== */
  --color-surface-page:     #FAFAF9;
  --color-surface-raised:   #FFFFFF;
  --color-surface-sunken:   #F1EFE8;  /* warm gray, sfondi secondari */

  --color-border-subtle:    #E5E5E2;
  --color-border-default:   #D6D5CE;
  --color-border-emphasis:  #A3A29B;

  --color-text-primary:     #1C1C1A;  /* titoli, enfasi */
  --color-text-body:        #3C3C38;  /* body text */
  --color-text-secondary:   #6B6B66;  /* metadata, label */
  --color-text-tertiary:    #A3A29B;  /* hint, disabled */
  --color-text-on-brand:    #FFFFFF;  /* testo su teal */

  /* ========== SEMANTIC ========== */
  --color-success-bg:    #E3EFEA;
  --color-success:       #3A8A69;
  --color-success-text:  #1F5640;

  --color-info-bg:       #E6EFF7;
  --color-info:          #3D7BB2;
  --color-info-text:     #1F4B7A;

  --color-warning-bg:    #FBF1DE;
  --color-warning:       #C68417;
  --color-warning-text:  #7A5520;

  --color-danger-bg:     #F7E5E5;
  --color-danger:        #B84848;
  --color-danger-text:   #6E2323;

  /* ========== TYPOGRAPHY ========== */
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --font-serif: 'Playfair Display', Georgia, serif;

  --text-display:  32px;  /* welcome hero */
  --text-h1:       24px;  /* page title (Playfair) */
  --text-h2:       18px;  /* section title (Inter) */
  --text-h3:       15px;  /* subsection (Inter) */
  --text-body:     14px;  /* body text */
  --text-small:    13px;  /* metadata */
  --text-caption:  11px;  /* uppercase label */
  /* Aggiunti in Fase 2A (navigation):
     --text-nav-title (16px) per il titolo del PageHeader (mobile/desktop default),
     posizione naturale fra --text-h3 (15) e --text-h2 (18).
     --text-meta (12px) per metadata compatte tipo subtitle del PageHeader,
     posizione naturale fra --text-caption (11) e --text-small (13). */
  --text-nav-title: 16px;
  --text-meta:      12px;

  --font-weight-regular: 400;
  --font-weight-medium:  500;
  --font-weight-serif:   600;  /* Playfair only */

  --line-height-tight:   1.15;  /* display, h1 */
  --line-height-normal:  1.4;   /* h2, h3 */
  --line-height-relaxed: 1.6;   /* body */

  --letter-spacing-caption: 0.4px;

  /* ========== SPACING — base 4px ========== */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  12px;
  --space-lg:  16px;
  --space-xl:  24px;
  --space-2xl: 32px;
  --space-3xl: 48px;

  /* ========== RADIUS ========== */
  --radius-sm:   6px;     /* chip piccoli, tag */
  --radius-md:   10px;    /* bottoni, input */
  --radius-lg:   14px;    /* card, dialog */
  --radius-pill: 999px;   /* chip stato, avatar */

  /* ========== SHADOW — ombre soffici, uso parsimonioso ========== */
  --shadow-none: none;
  --shadow-sm:   0 1px 2px rgba(28,28,26,0.04), 0 2px 6px rgba(28,28,26,0.04);
  --shadow-md:   0 4px 12px rgba(28,28,26,0.06), 0 10px 32px rgba(28,28,26,0.04);
  /* Aggiunto in Fase 2A (navigation): gradino successivo per hover di
     elementi flottanti (FAB) che partono già da --shadow-md. Allineato alla
     progressione di Shadow.Elevation in DashboardTheme.cs (e[3] depth=1). */
  --shadow-lg:   0 6px 16px rgba(28,28,26,0.065), 0 14px 40px rgba(28,28,26,0.044);

  /* ========== MOTION ========== */
  --duration-micro:    120ms;   /* chip toggle, check */
  --duration-standard: 200ms;   /* hover, state change */
  --duration-long:     300ms;   /* dialog, page transition */

  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);  /* ease-out */
  --ease-emphasis: cubic-bezier(0.2, 0, 0, 1);    /* enter, stronger */

  /* Aggiunti in Fase 2B (page transitions): durate dedicate per le animazioni
     di route-change via View Transitions API. La durata mobile è leggermente
     più lunga della desktop perché slide orizzontale percepito è più
     "pesante" del cross-fade. */
  --page-transition-duration-mobile:  280ms;
  --page-transition-duration-desktop: 200ms;

  /* ========== Z-INDEX ========== */
  --z-dropdown:  100;
  --z-sticky:    200;
  --z-sidebar:   300;
  --z-overlay:   400;
  --z-dialog:    500;
  --z-snackbar:  600;
  --z-tooltip:   700;
}