/*
 * tokens.css — Design tokens for JR Multiservizi
 *
 * Extracted from design/poc.html (approved POC).
 * These are the single source of truth for the visual language.
 * Every component in styles.css MUST use these variables — no hardcoded values.
 */

:root {
  /* ── Color palette ─────────────────────────────────────────────────────── */
  --bg:           #F7F6F3;  /* page background */
  --surface:      #FFFFFF;  /* card / modal / input background */
  --surface2:     #F0EEE9;  /* hover / thead / muted surface */
  --border:       #E2DED6;  /* borders, dividers */

  --text:         #1A1916;  /* primary text (also sidebar bg) */
  --text-muted:   #7A7670;  /* secondary / placeholder text */

  --accent:       #2C5F8A;  /* primary interactive color (navy blue) */
  --accent-hover: #1e4a6e;  /* accent on hover */
  --accent-light: #E8F0F7;  /* accent tint (badge bg, focus ring area) */

  --green:        #2E7D52;  /* pagato / success */
  --green-light:  #E6F4EC;  /* pagato badge / toggle background */

  --orange:       #C05A1A;  /* in attesa / warning */
  --orange-light: #FCF0E6;  /* in attesa badge background */

  --red:          #B83232;  /* error / destructive */
  --red-light:    #F7E7E7;  /* invalid / error badge background */

  /* ── Typography ────────────────────────────────────────────────────────── */
  --font-sans: 'DM Sans', system-ui, -apple-system, sans-serif;
  --font-mono: 'DM Mono', 'Courier New', monospace;

  --text-xs:   11px;
  --text-sm:   12px;
  --text-base: 13.5px;
  --text-md:   14px;
  --text-lg:   16px;
  --text-xl:   17px;

  --weight-normal:  400;
  --weight-medium:  500;
  --weight-semibold: 600;

  /* ── Spacing scale ─────────────────────────────────────────────────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  28px;
  --space-8:  32px;

  /* ── Border radius ─────────────────────────────────────────────────────── */
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:   10px;
  --radius-pill: 20px;

  /* ── Layout ────────────────────────────────────────────────────────────── */
  --sidebar-w: 220px;

  /* ── Shadows ───────────────────────────────────────────────────────────── */
  --shadow-card:  0 2px 12px rgba(0, 0, 0, 0.08);
  --shadow-modal: -4px 0 32px rgba(0, 0, 0, 0.15);

  /* ── Transitions ───────────────────────────────────────────────────────── */
  --transition-fast: 0.15s ease;
  --transition-mid:  0.25s ease;
}