/* =====================================================================
   PIZZA THIS · DESIGN SYSTEM « TRATTORIA »
   Une trattoria de qualité : papier crème, encre espresso, rouge tomate
   San Marzano, vert basilic, or d'huile d'olive. Titres en Playfair
   Display (italique pour l'accent), texte en Source Sans 3.
   Thème clair « Trattoria » par défaut, thème sombre « Sera » (le soir,
   salle tamisée) via [data-theme="dark"].
   Toute couleur, taille, rayon, ombre ou durée vient d'ici.
   ===================================================================== */
:root{
  /* ---- Marque ---- */
  --brand-red:      #B3362B;   /* tomate San Marzano : action principale */
  --brand-red-600:  #9A2C22;
  --brand-red-700:  #7C221A;
  --brand-navy:     #3F5E3A;   /* basilic : structure, accents calmes */
  --brand-navy-400: #5E7F4F;
  --brand-bun:      #C27A2C;   /* croûte dorée */
  --brand-cheese:   #A9802A;   /* or d'huile d'olive : mise en avant (texte lisible sur crème) */
  --brand-lettuce:  #6E8B4A;
  --brand-patty:    #5B3A22;
  --brand-gold:     #C9A24A;   /* filets dorés, ornements */
  --tricolore: linear-gradient(90deg,#3F7A3A 0 33.3%,#F4EEE2 33.3% 66.6%,#B3362B 66.6% 100%);

  /* ---- Surfaces : papier crème ---- */
  --bg:         #F5EFE3;
  --bg-2:       #EEE6D7;
  --surface:    #FFFCF6;
  --surface-2:  #FAF5EB;
  --surface-3:  #F2EADC;
  --surface-hi: #E8DDCB;
  --glass:      rgba(255,252,246,.86);
  --line:       rgba(70,48,28,.10);
  --line-2:     rgba(70,48,28,.17);
  --line-3:     rgba(70,48,28,.28);

  /* ---- Texte : encre espresso ---- */
  --ink:    #2A2019;
  --ink-2:  #4B3D32;
  --muted:  #806E5D;
  --faint:  #A8988A;
  --on-brand: #FFFCF6;

  /* ---- Fonctionnelles (toujours avec un libellé ou une icône) ---- */
  --crit:  #B3261E;  --crit-bg:  rgba(179,38,30,.09);
  --warn:  #B5631A;  --warn-bg:  rgba(181,99,26,.11);
  --prev:  #8A6A14;  --prev-bg:  rgba(169,128,42,.14);
  --ok:    #3F7A3A;  --ok-bg:    rgba(63,122,58,.11);
  --info:  #3D6A8A;  --info-bg:  rgba(61,106,138,.10);
  --param: #7A6B5E;  --param-bg: rgba(122,107,94,.11);

  /* ---- Données ---- */
  --data-1: #B3362B;
  --data-1-soft: rgba(179,54,43,.14);
  --data-grid: rgba(70,48,28,.08);

  /* ---- Typographie ---- */
  --f-display: "Playfair Display", "Libre Baskerville", Georgia, "Times New Roman", serif;
  --f-body: "Source Sans 3", "Source Sans Pro", "Segoe UI", system-ui, -apple-system, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --t-11: 11px; --t-12: 12px; --t-13: 13px; --t-14: 14px; --t-15: 15px; --t-16: 16px;
  --t-18: 18px; --t-22: 22px; --t-28: 28px; --t-36: 36px; --t-48: 48px; --t-64: 64px;

  /* ---- Espacements (base 4) ---- */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px;

  /* ---- Rayons : plus sobres ---- */
  --r-xs: 4px; --r-sm: 7px; --r-md: 10px; --r-lg: 12px; --r-xl: 16px; --r-pill: 999px;

  /* ---- Ombres : douces, chaudes ---- */
  --sh-1: 0 1px 2px rgba(70,45,20,.07);
  --sh-2: 0 1px 2px rgba(70,45,20,.06), 0 14px 32px -18px rgba(70,45,20,.30);
  --sh-3: 0 30px 70px -26px rgba(70,45,20,.40);
  --sh-red: 0 8px 20px -12px rgba(179,54,43,.55);
  --ring: 0 0 0 3px rgba(169,128,42,.32);

  /* ---- Mouvement ---- */
  --ease: cubic-bezier(.2,.8,.2,1);
  --ease-spring: cubic-bezier(.34,1.3,.64,1);
  --d-1: 120ms; --d-2: 200ms; --d-3: 320ms; --d-4: 520ms;

  /* ---- Mise en page ---- */
  --sidebar-w: 248px;
  --sidebar-w-compact: 76px;
  --topbar-h: 68px;
  --ticket-w: 400px;

  color-scheme: light;
}

/* ---------------- Thème sombre « Sera » ---------------- */
:root[data-theme="dark"]{
  --brand-red: #CF5443; --brand-red-600: #B8483A; --brand-red-700: #9A3A2E;
  --brand-cheese: #D8B25E; --brand-gold: #D8B25E; --brand-navy: #7E9E68; --brand-navy-400: #94B27C;
  --bg:         #17130F;
  --bg-2:       #13100D;
  --surface:    #201A15;
  --surface-2:  #28211B;
  --surface-3:  #312821;
  --surface-hi: #3A2F27;
  --glass:      rgba(32,26,21,.84);
  --line:       rgba(243,232,214,.08);
  --line-2:     rgba(243,232,214,.14);
  --line-3:     rgba(243,232,214,.24);
  --ink:    #F4EADA;
  --ink-2:  #D9CAB4;
  --muted:  #A8957E;
  --faint:  #7B6B5A;
  --on-brand: #FFF8EE;
  --crit:  #E07A6E;  --crit-bg:  rgba(224,122,110,.13);
  --warn:  #E0A15E;  --warn-bg:  rgba(224,161,94,.13);
  --prev:  #D8B25E;  --prev-bg:  rgba(216,178,94,.13);
  --ok:    #8DB879;  --ok-bg:    rgba(141,184,121,.13);
  --info:  #8DB0CF;  --info-bg:  rgba(141,176,207,.13);
  --param: #A8977F;  --param-bg: rgba(168,151,127,.14);
  --data-1: #CF5443; --data-1-soft: rgba(207,84,67,.20); --data-grid: rgba(243,232,214,.07);
  --sh-1: 0 1px 2px rgba(0,0,0,.35);
  --sh-2: 0 1px 2px rgba(0,0,0,.3), 0 14px 32px -16px rgba(0,0,0,.7);
  --sh-3: 0 30px 70px -24px rgba(0,0,0,.8);
  --sh-red: 0 8px 22px -12px rgba(207,84,67,.6);
  --ring: 0 0 0 3px rgba(216,178,94,.35);
  color-scheme: dark;
}

@media (prefers-reduced-motion: reduce){
  :root{ --d-1: 0ms; --d-2: 0ms; --d-3: 0ms; --d-4: 0ms; }
}