/* =====================================================================
 * PIM White Label — Design System Tokens
 * =====================================================================
 * Extracted from Figma: tYaivTNHnG9slPGWNXSmdq (node 236:4)
 * 3 livelli: Primitive → Semantic → Component
 * NON modificare manualmente i valori — rigenerare da Figma Variables.
 * ===================================================================== */

/* ---------------------------------------------------------------------
 * Font face — Locator (OTF, caricato dalla cartella static/pim_ds/fonts)
 * font-display: swap per evitare FOIT.
 * SemiBold (600) → mappato su Medium OTF (Locator non ha SemiBold nativo).
 * --------------------------------------------------------------------- */
@font-face {
  font-family: "Locator";
  src: url("fonts/Locator Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Locator";
  src: url("fonts/Locator Light Italic.otf") format("opentype");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Locator";
  src: url("fonts/Locator Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Locator";
  src: url("fonts/Locator Regular Italic.otf") format("opentype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Locator";
  src: url("fonts/Locator Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Locator";
  src: url("fonts/Locator Medium Italic.otf") format("opentype");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Locator";
  src: url("fonts/Locator Medium.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Locator";
  src: url("fonts/Locator Medium Italic.otf") format("opentype");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Locator";
  src: url("fonts/Locator Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Locator";
  src: url("fonts/Locator Bold Italic.otf") format("opentype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

:root {

  /* ============================================================
   * 1. PRIMITIVES
   * ============================================================ */

  /* Primary (blu ASA) */
  --ds-primary-50:  #e5f5fb;
  --ds-primary-100: #cce9f5;
  --ds-primary-200: #99d4ec;
  --ds-primary-300: #66bfe2;
  --ds-primary-400: #33aad8;
  --ds-primary-500: #0004E8;
  --ds-primary-600: #0082bd;
  --ds-primary-700: #006d9e;
  --ds-primary-800: #005880;
  --ds-primary-900: #003d59;
  --ds-primary-950: #002a3d;
  /* Alias semantici della scala primary (seguono il brand a runtime; prima
     erano usati senza definizione → fallback blu hardcoded, ignorando il brand). */
  --ds-primary-soft:    var(--ds-primary-300);
  --ds-primary-soft-bg: var(--ds-primary-50);
  --ds-primary-weak:    var(--ds-primary-50);
  --ds-primary-strong:  var(--ds-primary-700);
  --ds-primary-stronger: var(--ds-primary-800);

  /* Accent (blu chiaro) */
  --ds-accent-50:  #eaf6fc;
  --ds-accent-100: #d5eefc;
  --ds-accent-200: #aadcf5;
  --ds-accent-300: #80cbf0;
  --ds-accent-400: #55bbe8;
  --ds-accent-500: #33ace1;
  --ds-accent-600: #2b96c4;
  --ds-accent-700: #237fa6;
  --ds-accent-800: #1b6889;
  --ds-accent-900: #13516b;
  --ds-accent-950: #0d3a4e;

  /* Neutral */
  --ds-neutral-25:  #f7f7f7;
  --ds-neutral-50:  #f5f5f5;
  --ds-neutral-100: #e8e9ea;
  --ds-neutral-200: #b7bcbf;
  --ds-neutral-300: #939a9f;
  --ds-neutral-400: #81898f;
  --ds-neutral-500: #6f797f;
  --ds-neutral-600: #4b575f;
  --ds-neutral-700: #323e46;
  --ds-neutral-800: #1a2830;
  --ds-neutral-900: #000b13;
  --ds-neutral-950: #000508;

  /* Slate (neutral freddo) */
  --ds-slate-50:  #f3f4f5;
  --ds-slate-100: #e6e7e9;
  --ds-slate-200: #c8ccd0;
  --ds-slate-300: #9ea4aa;
  --ds-slate-400: #747c84;
  --ds-slate-500: #56606a;
  --ds-slate-600: #454e57;
  --ds-slate-700: #3c444c;
  --ds-slate-800: #384047;
  --ds-slate-900: #2d343a;
  --ds-slate-950: #1b2024;

  /* Status */
  --ds-green-100: #dcfce7;
  --ds-green-500: #22c55e;
  --ds-green-800: #166534;
  --ds-amber-100: #fef3c7;
  --ds-amber-500: #f59e0b;
  --ds-amber-800: #92400e;
  --ds-red-100:   #fee2e2;
  --ds-red-500:   #ef4444;
  --ds-red-800:   #991b1b;
  /* Blu semantico per lo stato "info/approvato" (semaforo) — FISSO,
     indipendente dal brand (es. West è rosso → l'info NON deve essere rosso). */
  --ds-blue-100:  #dbeafe;
  --ds-blue-500:  #3b82f6;
  --ds-blue-800:  #1e40af;
  --ds-white:     #ffffff;

  /* Spacing (px) — base grid 4px */
  --ds-space-0:   0;
  --ds-space-xxs: 4px;
  --ds-space-2xs: 6px;
  --ds-space-xs:  8px;
  --ds-space-s:   10px;
  --ds-space-sm:  12px;
  --ds-space-m:   14px;
  --ds-space-md:  16px;
  --ds-space-lg:  24px;
  --ds-space-xl:  32px;
  --ds-space-2xl: 48px;
  --ds-space-3xl: 64px;
  --ds-space-4xl: 96px;

  /* Radius (px) */
  --ds-radius-none: 0;
  --ds-radius-xs:   4px;
  --ds-radius-sm:   8px;
  --ds-radius-md:   12px;
  --ds-radius-lg:   16px;
  --ds-radius-full: 9999px;

  /* Font sizes (px) */
  --ds-font-display: 36px;
  --ds-font-h1:      30px;
  --ds-font-h2:      24px;
  --ds-font-h3:      20px;
  --ds-font-h4:      18px;
  --ds-font-body:    16px;
  --ds-font-body-sm: 14px;
  --ds-font-caption: 12px;
  --ds-font-xs:      11px;

  /* Font family */
  --ds-font-family: "Locator", "Inter", -apple-system, BlinkMacSystemFont,
                    "Segoe UI", Roboto, sans-serif;

  /* Line heights */
  --ds-lh-tight:   1.2;
  --ds-lh-snug:    1.3;
  --ds-lh-normal:  1.4;
  --ds-lh-relaxed: 1.5;

  /* ============================================================
   * 2. SEMANTIC
   * ============================================================ */

  /* Brand — Oxequa: interfaccia NERA (Pure Black) + accento Sizzling Red.
     Il primary guida chrome/azioni (bottoni, link, tab, stati attivi) = nero.
     L'accento (#FF224C) è "rosso minimo": focus, indicatori attivi, errori. */
  --ds-color-primary:         var(--ds-neutral-900);   /* #000b13 — near-black */
  --ds-color-primary-hover:   var(--ds-neutral-950);   /* #000508 */
  --ds-color-primary-pressed: #000000;
  --ds-color-accent:          #FF224C;                 /* Sizzling Red */

  /* Status */
  --ds-color-success: var(--ds-green-500);
  --ds-color-warning: var(--ds-amber-500);
  --ds-color-error:   var(--ds-red-500);
  --ds-color-info:    var(--ds-primary-500);

  /* Surfaces */
  --ds-surface-background:   var(--ds-white);
  --ds-surface-card:         var(--ds-white);
  /* Page canvas: grigio più chiaro (neutral-25) rispetto a `surface-muted`.
     Usato come background del main container per staccare visivamente
     le card senza essere pesante come neutral-50. */
  --ds-surface-page:         var(--ds-neutral-25);
  --ds-surface-muted:        var(--ds-neutral-50);
  --ds-surface-sidebar:      #000000;                  /* Oxequa Pure Black */
  --ds-surface-overlay:      rgba(0, 11, 19, 0.6);
  --ds-surface-skeleton:     var(--ds-slate-100);
  /* Tint della primary: deve seguire il BRAND (era #ebf7ff azzurro hardcoded →
     fuori-brand su istanze non-blu come West/rosso). `--ds-primary-50` è
     rigenerato a runtime da core.branding dal brand_primary. */
  --ds-surface-primary-tint: var(--ds-primary-50);
  --ds-surface-warning-tint: #fff7e0;
  --ds-surface-error-tint:   #fff2f2;
  --ds-surface-success-tint: #ebf9f0;
  --ds-surface-hover:        #f8f9fa;

  /* On-surface (text) — contrasto WCAG AA (≥4.5:1 su superfici chiare).
     I muted erano troppo chiari: tertiary #939a9f≈2.8:1 (FAIL), secondary
     #6f797f≈4.45:1 (borderline). Ora secondary=neutral-600 (~6.7:1),
     tertiary=#5e6970 (~5.6:1) → leggibili e con gerarchia preservata.
     `muted` resta chiaro: SOLO decorativo (placeholder), mai testo informativo. */
  --ds-on-surface-primary:   var(--ds-neutral-900);
  --ds-on-surface-secondary: var(--ds-neutral-600);
  --ds-on-surface-tertiary:  #5e6970;
  /* WCAG 2.1 AA 1.4.3: il muted era #b7bcbf (neutral-200) = 1.92:1 su bianco,
     fallendo per le label/titoli di sezione. Portato a 5.3:1 mantenendo la
     gerarchia (più chiaro di secondary). I placeholder restano chiari sotto
     (--ds-input-placeholder, esenti da 1.4.3). */
  --ds-on-surface-muted:     #646d73;
  --ds-on-surface-inverse:   var(--ds-white);

  /* Borders */
  --ds-border-default: var(--ds-neutral-100);
  --ds-border-strong:  var(--ds-neutral-200);
  --ds-border-focus:   var(--ds-color-accent);         /* rosso minimo */
  --ds-border-error:   var(--ds-red-500);

  /* Semantic spacing (layout) */
  --ds-space-page-padding:  var(--ds-space-lg);   /* 24 */
  --ds-space-section-gap:   var(--ds-space-xl);   /* 32 */
  --ds-space-card-padding:  var(--ds-space-md);   /* 16 */
  --ds-space-input-padding: var(--ds-space-sm);   /* 12 */

  /* ============================================================
   * 3. COMPONENT
   * ============================================================ */

  /* Buttons */
  --ds-btn-primary-bg:       var(--ds-color-primary);
  --ds-btn-primary-text:     var(--ds-white);
  --ds-btn-primary-hover-bg: var(--ds-color-primary-hover);
  --ds-btn-secondary-border: var(--ds-color-primary);
  --ds-btn-secondary-text:   var(--ds-color-primary);
  --ds-btn-destructive-bg:   var(--ds-color-error);
  --ds-btn-destructive-text: var(--ds-white);
  --ds-btn-ghost-text:       var(--ds-color-primary);
  --ds-btn-radius:           var(--ds-radius-sm);

  /* Inputs */
  --ds-input-bg:           var(--ds-white);
  --ds-input-border:       var(--ds-border-default);
  --ds-input-border-focus: var(--ds-border-focus);
  --ds-input-border-error: var(--ds-border-error);
  --ds-input-text:         var(--ds-on-surface-primary);
  /* Placeholder volutamente chiaro (distinto dal testo digitato); esente da
     1.4.3. Scollegato da --ds-on-surface-muted dopo averlo reso AA-conforme. */
  --ds-input-placeholder:  var(--ds-neutral-300);
  --ds-input-label:        var(--ds-on-surface-primary);
  --ds-input-radius:       var(--ds-radius-sm);

  /* Cards */
  --ds-card-bg:     var(--ds-white);
  --ds-card-border: var(--ds-border-default);
  --ds-card-radius: var(--ds-radius-sm);

  /* Tables */
  /* Header tabella: valore dedicato (#eeeeee) leggermente più scuro di
     neutral-50 (#f5f5f5) per staccare meglio dalle row body bianche e
     dal canvas di pagina (--ds-surface-page). */
  --ds-table-header-bg:   #eeeeee;
  --ds-table-header-text: var(--ds-neutral-500);
  --ds-table-row-border:  var(--ds-border-default);

  /* Sidebar */
  --ds-sidebar-bg:        var(--ds-surface-sidebar);
  --ds-sidebar-text:      var(--ds-white);
  --ds-sidebar-active-bg: rgba(255, 34, 76, 0.16);     /* Sizzling Red tint */

  /* Badges */
  --ds-badge-radius:       var(--ds-radius-full);
  --ds-badge-success-bg:   var(--ds-green-100);
  --ds-badge-success-text: var(--ds-green-800);
  --ds-badge-warning-bg:   var(--ds-amber-100);
  --ds-badge-warning-text: var(--ds-amber-800);
  --ds-badge-error-bg:     var(--ds-red-100);
  --ds-badge-error-text:   var(--ds-red-800);
  /* Info/approvato = blu FISSO (semaforo brand-independent), non il brand. */
  --ds-badge-info-bg:      var(--ds-blue-100);
  --ds-badge-info-text:    var(--ds-blue-800);

  /* Tabs */
  --ds-tab-active-border: var(--ds-color-primary);
  --ds-tab-active-text:   var(--ds-color-primary);
  --ds-tab-inactive-text: var(--ds-on-surface-secondary);

  /* Motion */
  --ds-motion-fast:   150ms;
  --ds-motion-normal: 250ms;
  --ds-motion-slow:   400ms;
  --ds-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ds-ease-enter:    cubic-bezier(0, 0, 0.2, 1);
  --ds-ease-exit:     cubic-bezier(0.4, 0, 1, 1);

  /* Shadows */
  --ds-shadow-sm: 0 1px 2px 0 rgba(0, 11, 19, 0.05);
  --ds-shadow-md: 0 4px 6px -1px rgba(0, 11, 19, 0.08),
                  0 2px 4px -2px rgba(0, 11, 19, 0.04);
  --ds-shadow-lg: 0 10px 15px -3px rgba(0, 11, 19, 0.08),
                  0 4px 6px -4px rgba(0, 11, 19, 0.04);
  --ds-shadow-xl: 0 20px 25px -5px rgba(0, 11, 19, 0.08),
                  0 8px 10px -6px rgba(0, 11, 19, 0.04);
}