/* =============================================================
   DESIGN TOKENS — Garage Perbet
   Source unique des valeurs de design, partagée par le site public
   (style.css) et l'espace gérant (admin.css).

   Deux couches :
   1. Primitives   : valeurs brutes (palette, échelles). Ne pas les
                     utiliser directement dans un composant.
   2. Sémantique   : rôles (texte, surface, accent, statut…). Les
                     composants ne consomment que cette couche, ce qui
                     permettra un mode sombre en ne redéfinissant qu'elle.
   ============================================================= */

/* Archivo (SIL Open Font License 1.1, voir assets/fonts/OFL.txt) —
   police variable auto-hébergée : axes graisse 100–900 et largeur 62–125 %.
   Aucun appel aux serveurs Google. */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('../fonts/archivo-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('../fonts/archivo-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* ---------- 1. Primitives ---------- */
  --yellow-50:  #FFFBEA;
  --yellow-100: #FFF3C4;
  --yellow-400: #FFCC00;   /* jaune de marque (logo) */
  --yellow-500: #F0B800;
  --yellow-700: #8A6A00;   /* seul « jaune » lisible en texte sur fond clair (5,1:1) */

  --ink-950: #0E0F11;
  --ink-900: #17181B;
  --ink-800: #26282C;
  --ink-700: #3A3D42;
  --ink-600: #5A5E66;
  --ink-500: #7A7F88;      /* 4:1 sur blanc : décoratif / désactivé uniquement */
  --ink-300: #C9CCD1;
  --ink-200: #E3E5E8;
  --ink-100: #F1F2F4;
  --ink-50:  #F8F9FA;
  --white:   #FFFFFF;

  /* ---------- 2. Sémantique ---------- */
  --surface-page:    var(--white);
  --surface-sunken:  var(--ink-50);
  --surface-muted:   var(--ink-100);
  --surface-raised:  var(--white);
  --surface-inverse: var(--ink-950);

  --text-primary:          var(--ink-900);   /* 17,8:1 */
  --text-secondary:        var(--ink-600);   /* 6,5:1 */
  --text-on-inverse:       var(--white);
  --text-on-inverse-muted: #B8BCC4;          /* 10:1 sur ink-950 */
  --text-on-accent:        var(--ink-950);   /* 12,6:1 sur le jaune */

  --accent:       var(--yellow-400);
  --accent-hover: var(--yellow-500);
  --accent-soft:  var(--yellow-100);
  --accent-text:  var(--yellow-700);

  --border-subtle: var(--ink-200);
  --border-strong: var(--ink-300);
  --focus:         var(--ink-900);
  --focus-halo:    rgb(255 204 0 / .5);

  --success-fg: #1E6B3A; --success-bg: #E8F5EC; --success-border: #B9DFC6;
  --danger-fg:  #B42318; --danger-bg:  #FDECEA; --danger-border:  #F5C2BD;
  --warning-fg: #92400E; --warning-bg: #FFF7E0; --warning-border: #F3D9A4;
  --info-fg:    #1F4E8C; --info-bg:    #EEF3F9; --info-border:    #C5D6E8;
  --sold-bg:    var(--ink-900);              /* badge « Vendu » : indisponible, pas « positif » */

  /* ---------- Typographie ---------- */
  --font-display: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --display-stretch:  115%;                  /* titres en largeur étendue */
  --display-tracking: -0.02em;

  --text-xs:      .75rem;                                  /* 12 px — surtitres, mentions */
  --text-sm:      .875rem;                                 /* 14 px — méta, libellés */
  --text-base:    1.0625rem;                               /* 17 px — corps */
  --text-lg:      1.25rem;                                 /* 20 px — titres de carte, chapô */
  --text-xl:      clamp(1.375rem, 1.2rem + .6vw, 1.625rem);  /* h3, prix */
  --text-2xl:     clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);    /* h2 */
  --text-3xl:     clamp(2.25rem, 1.6rem + 2.8vw, 4rem);      /* h1 */
  --text-display: clamp(2.5rem, 1.6rem + 4.2vw, 5.25rem);    /* hero */

  --leading-tight: 1.05;
  --leading-snug:  1.25;
  --leading-body:  1.6;
  --tracking-overline: .08em;

  /* ---------- Espacement (base 4 px) ---------- */
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --section-y: clamp(3.5rem, 2.5rem + 4vw, 6rem);

  --container:        1240px;
  --container-narrow: 820px;
  --gutter:           clamp(1rem, 4vw, 2rem);
  --header-h:         72px;

  /* ---------- Forme ---------- */
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-pill: 999px;

  /* ---------- Élévation ---------- */
  --shadow-1: 0 1px 2px rgb(14 15 17 / .06), 0 1px 3px rgb(14 15 17 / .08);
  --shadow-2: 0 4px 12px -2px rgb(14 15 17 / .10), 0 2px 4px rgb(14 15 17 / .06);
  --shadow-3: 0 24px 48px -12px rgb(14 15 17 / .28);

  /* ---------- Mouvement ---------- */
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --ease-out: cubic-bezier(.2, .8, .2, 1);

  /* ---------- Plans ---------- */
  --z-header:   100;
  --z-dropdown: 200;
  --z-modal:    1000;
}