/* ==========================================================================
   GARBADROME — Design tokens
   Base claire et chaude (le sable / l'attiéké), ponctuée de bandes profondes.
   Vert et orange relevés sur l'enseigne du restaurant.
   ========================================================================== */

:root {
  /* ---- Marque ---- */
  --gd-green:        #1E8E45;   /* vert enseigne, assombri pour le contraste sur clair */
  --gd-green-bright: #2CA84D;   /* vert enseigne d'origine */
  --gd-green-deep:   #0F5228;
  --gd-green-dark:   #10261A;   /* fond des bandes vertes */
  --gd-orange:       #E0600C;   /* orange enseigne, assombri pour le contraste */
  --gd-orange-bright:#F26F21;   /* orange enseigne d'origine */
  --gd-orange-hot:   #FF8A3D;
  --gd-orange-deep:  #A93D05;
  --gd-gold:         #D99A1F;

  /* ---- Fonds clairs ---- */
  --sand:    #FBF6ED;
  --sand-2:  #F4EBDB;
  --sand-3:  #EADFC9;
  --paper:   #FFFDF9;

  /* ---- Fonds profonds ---- */
  --coal:    #14120F;
  --coal-2:  #1E1B16;
  --coal-3:  #2A251E;

  /* ---- Texte ---- */
  --tx:        #16130F;   /* sur fond clair */
  --tx-soft:   #554C41;
  --tx-faint:  #857868;
  --tx-inv:    #FBF6ED;   /* sur fond profond */
  --tx-inv-s:  #C4B8A6;
  --tx-inv-f:  #8B8072;

  /* ---- Traits ---- */
  --line:      rgba(22,19,15,.10);
  --line-mid:  rgba(22,19,15,.18);
  --line-inv:  rgba(251,246,237,.14);

  /* ---- Ombres ---- */
  --sh-1: 0 1px 2px rgba(60,45,25,.08);
  --sh-2: 0 10px 28px -10px rgba(60,45,25,.24);
  --sh-3: 0 28px 60px -20px rgba(60,45,25,.34);
  --sh-warm: 0 18px 44px -16px rgba(224,96,12,.38);

  /* ---- Typographie ---- */
  --f-display: "Bricolage Grotesque", "Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-body:    "Instrument Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --f-mono:    "DM Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  --t-xs:   clamp(.72rem, .70rem + .10vw, .78rem);
  --t-sm:   clamp(.84rem, .81rem + .14vw, .92rem);
  --t-base: clamp(.98rem, .94rem + .20vw, 1.08rem);
  --t-lg:   clamp(1.10rem, 1.03rem + .34vw, 1.30rem);
  --t-xl:   clamp(1.35rem, 1.20rem + .70vw, 1.85rem);
  --t-2xl:  clamp(1.75rem, 1.40rem + 1.60vw, 3.00rem);
  --t-3xl:  clamp(2.30rem, 1.60rem + 3.20vw, 4.60rem);
  --t-4xl:  clamp(2.90rem, 1.70rem + 5.40vw, 6.80rem);

  /* ---- Rythme ---- */
  --wrap:      1240px;
  --wrap-slim: 880px;
  --gut:       clamp(1.15rem, .70rem + 2.00vw, 2.75rem);
  --sect-y:    clamp(4rem, 2.6rem + 5.5vw, 8.5rem);
  --r-sm:  8px;
  --r-md:  14px;
  --r-lg:  22px;
  --r-xl:  32px;
  --r-pill: 999px;

  /* ---- Transitions ---- */
  --e-out:    cubic-bezier(.22,.61,.36,1);
  --e-spring: cubic-bezier(.34,1.36,.64,1);
  --d-fast: .18s;
  --d-med:  .34s;
  --d-slow: .7s;

  --actionbar-h: 0px;

  /* ---- Motif géométrique repris du logo (tissu ivoirien) ---- */
  --motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'%3E%3Cpath d='M0 22 L22 0 L44 22 L22 44 Z' fill='none' stroke='%23E0600C' stroke-width='1.3'/%3E%3Cpath d='M8 22 L22 8 L36 22 L22 36 Z' fill='none' stroke='%231E8E45' stroke-width='1.1'/%3E%3Cpath d='M0 0 L44 44 M44 0 L0 44' stroke='%23E0600C' stroke-width='.7' opacity='.45'/%3E%3C/svg%3E");
}

@media (max-width: 820px) {
  :root { --actionbar-h: 68px; }
}