/* ==========================================================================
   EQUIDEM DESIGN SYSTEM - DESIGN TOKENS (tokens.css)
   Single Source of Truth for Colors, Typography, Spacing, and Elevation.

   Civic-Institutional palette: deep navy, archival crimson, transparency
   green on a slate/canvas background. Variable NAMES are unchanged from the
   previous iteration so every existing rule and template keeps working.
   ========================================================================== */

:root {
  /* --- Brand & Primary Colors (Deep Civic Navy) --- */
  --color-primary: #0b2545;           /* Navy istituzionale autorevole */
  --color-primary-hover: #07192f;
  --color-primary-light: #f0f4f8;     /* Superficie informativa fredda */
  --color-primary-dark: #051324;
  --color-accent-blue: #1d4ed8;       /* Blu di precisione per link e dati */
  --color-accent-blue-hover: #1e40af;

  /* --- Semantic Colors --- */
  --color-success: #1b6339;           /* Verde trasparenza / open data */
  --color-success-light: #eef6f1;
  --color-danger: #a62626;            /* Cremisi d'archivio (non "errore") */
  --color-danger-hover: #8c1f1f;
  --color-danger-light: #fdf2f2;
  --color-warning: #b45309;           /* Ambra istituzionale */
  --color-warning-light: #fffbeb;
  --color-info: #0369a1;

  /* --- Civic accents (extended palette) --- */
  --color-civic-crimson: #9e2a2b;
  --color-civic-crimson-dark: #7f2122;
  --color-civic-forest: #1e5e3a;
  --color-civic-slate: #f4f6f8;
  --color-civic-sand: #f7f5f1;        /* Carta calda per i blocchi dati */

  /* --- Marker Highlighting Tokens (WCAG AAA con testo bianco) --- */
  --color-marker-red-text: #ffffff;
  --color-marker-red-bg: #9e2a2b;
  --color-marker-green-text: #ffffff;
  --color-marker-green-bg: #1b6339;
  --color-marker-blue-text: #ffffff;
  --color-marker-blue-bg: #1e40af;

  /* --- Social Media Brand Colors --- */
  --color-social-youtube: #ff0000;
  --color-social-instagram: #e1306c;
  --color-social-x: #000000;
  --color-social-tiktok: #1eb9b4;
  --color-social-whatsapp: #25d366;
  --color-social-facebook: #1877f2;
  --gradient-instagram: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);

  /* --- Neutral & Surface Palette --- */
  --color-text-main: #1e293b;         /* Ardesia scurissimo */
  --color-text-heading: #0f172a;      /* Titoli ad alto contrasto */
  --color-text-subheading: #334155;
  --color-text-body: #334155;
  --color-text-muted: #64748b;        /* Metadati e didascalie */
  --color-text-inverse: #ffffff;

  --color-bg-body: #f8fafc;           /* Canvas civile */
  --color-bg-surface: #ffffff;        /* Schede e pannelli */
  --color-bg-surface-alt: #f1f5f9;    /* Sfondi alternati, tabelle */
  --color-bg-canvas: #e2e8f0;         /* Canvas editor e separatori */
  --color-bg-article-warm: #f7f5f1;

  /* Hairline borders per rigore grafico */
  --color-border-subtle: #e2e8f0;
  --color-border: #cbd5e1;
  --color-border-strong: #94a3b8;

  /* --- Typography (famiglie invariate) --- */
  --font-header: 'header', 'Alfa Slab One', serif;
  --font-subheader: 'subheader', 'Roboto Flex', sans-serif;
  --font-body: 'body', 'Lato', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  /* --- Type Scale --- */
  --font-size-xs: 0.75rem;    /* 12px */
  --font-size-sm: 0.875rem;   /* 14px */
  --font-size-base: 1rem;     /* 16px */
  --font-size-md: 1.125rem;   /* 18px */
  --font-size-lg: 1.25rem;    /* 20px */
  --font-size-xl: 1.5rem;     /* 24px */
  --font-size-2xl: 1.85rem;   /* 29.6px */
  --font-size-3xl: 2.25rem;   /* 36px */
  --font-size-4xl: 2.75rem;   /* 44px */

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Alfa Slab One (--font-header) ships ONE static cut, Regular 400: there is
     no 500/600/700 face in the family. Asking for any weight >= 500 makes the
     browser synthesise a faux bold (stroke thickening without extra advance),
     whose extra ink spills into the already tight counters of the slab face.
     At UI sizes (14-16px) that reads as blurred/smeared text. Every rule that
     switches to --font-header must therefore pin this token instead of
     semibold/bold; --font-weight-semibold stays reserved for text faces. */
  --font-weight-display: 400;

  --line-height-tight: 1.2;
  --line-height-snug: 1.4;
  --line-height-base: 1.6;
  --line-height-relaxed: 1.75;

  /* --- Technical tracking for metadata labels --- */
  --tracking-caps: 0.08em;
  --tracking-caps-wide: 0.12em;

  /* --- Spacing Scale (8pt Grid) --- */
  --space-1: 0.25rem;  /* 4px */
  --space-2: 0.5rem;   /* 8px */
  --space-3: 0.75rem;  /* 12px */
  --space-4: 1rem;     /* 16px */
  --space-5: 1.25rem;  /* 20px */
  --space-6: 1.5rem;   /* 24px */
  --space-8: 2rem;     /* 32px */
  --space-10: 2.5rem;  /* 40px */
  --space-12: 3rem;    /* 48px */

  /* --- Border Radius (sobri e squadrati) --- */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;     /* Pulsanti e input */
  --radius-lg: 8px;     /* Schede e contenitori */
  --radius-xl: 10px;
  --radius-2xl: 12px;
  --radius-pill: 50rem; /* Solo status badge e contatori */
  --radius-circle: 50%;

  /* --- Shadows (multi-livello, pulite) --- */
  --shadow-sm: 0 1px 2px 0 rgba(15, 23, 42, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.07), 0 2px 4px -2px rgba(15, 23, 42, 0.05);
  --shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -4px rgba(15, 23, 42, 0.04);
  --shadow-card-hover: 0 8px 20px -4px rgba(15, 23, 42, 0.10);
  --shadow-modal: 0 20px 25px -5px rgba(15, 23, 42, 0.15), 0 8px 10px -6px rgba(15, 23, 42, 0.10);

  /* --- Transitions --- */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.25s ease-in-out;
  --transition-slow: 0.5s ease-in-out;

  /* --- Layout & Breakpoints (Tokenized) --- */
  --container-max-width: 1200px;
  --container-wide: 1320px;
  --container-narrow: 760px;
  --navbar-max-width: 1320px;
  --editor-max-width: 1080px;

  /* --- Z-Index Layering --- */
  --z-base: 1;
  --z-sticky: 1020;
  --z-dropdown: 1000;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-spinner: 1060;
}