/*
 * Design tokens. Les couleurs, polices, largeur et arrondi sont REDÉFINIS par le
 * Customizer (bloc :root injecté juste après ce fichier). Les valeurs ci-dessous
 * sont des replis. Points de rupture (mobile-first) : 48em (tablette), 64em (bureau).
 */
:root {
  /* Replis statiques : le Customizer les redéfinit toujours juste après (voir tpc_get_css_variables()). */
  --tpc-primary-color: #0072a9;
  --tpc-on-primary-color: #fff;
  --tpc-secondary-color: #fb8b0b;
  --tpc-on-secondary-color: #000;
  --tpc-text-color: #010080;
  --tpc-background-color: #fff;
  --tpc-container-width: 1280px;
  --tpc-border-radius: 4px;
  --tpc-font-body: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --tpc-font-heading: var(--tpc-font-body);
  --tpc-cols-desktop: 4;
  --tpc-cols-tablet: 3;
  --tpc-cols-mobile: 2;

  /* Dérivées (replis, affinées ci-dessous si color-mix est supporté). */
  --tpc-muted-color: #5b5b63;
  --tpc-border-color: #dcdce0;
  --tpc-control-border-color: #767680; /* contraste >= 3:1 (WCAG 1.4.11) */
  --tpc-surface-color: #f5f5f7;
  --tpc-focus-color: var(--tpc-primary-color);

  /* États : couleurs sémantiques (contraste >= 4.5:1 sur fond blanc). */
  --tpc-sale-color: #b3261e;
  --tpc-error-color: #b3261e;
  --tpc-success-color: #1f7a3f;
  --tpc-warning-color: #8a5a00;

  --tpc-space-1: .25rem;
  --tpc-space-2: .5rem;
  --tpc-space-3: .75rem;
  --tpc-space-4: 1rem;
  --tpc-space-5: 1.5rem;
  --tpc-space-6: 2rem;
  --tpc-space-8: 3rem;
  --tpc-space-10: 4.5rem;

  --tpc-text-sm: .875rem;
  --tpc-text-base: 1rem;
  --tpc-text-lg: 1.125rem;
  --tpc-text-xl: 1.375rem;
  --tpc-text-2xl: clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem);

  --tpc-shadow-sm: 0 1px 3px rgb(0 0 0 / .1);
  --tpc-shadow-md: 0 8px 24px rgb(0 0 0 / .14);
  --tpc-transition: 150ms ease;
  --tpc-touch-target: 2.75rem;
  --tpc-bottom-nav-height: 3.5rem;

  --tpc-z-header: 100;
  --tpc-z-dropdown: 200;
  --tpc-z-bottom-nav: 900;
  --tpc-z-overlay: 1000;
}

@supports (color: color-mix(in srgb, red, blue)) {
  :root {
    --tpc-muted-color: color-mix(in srgb, var(--tpc-text-color) 68%, var(--tpc-background-color));
    --tpc-border-color: color-mix(in srgb, var(--tpc-text-color) 16%, var(--tpc-background-color));
    --tpc-control-border-color: color-mix(in srgb, var(--tpc-text-color) 55%, var(--tpc-background-color));
    --tpc-surface-color: color-mix(in srgb, var(--tpc-text-color) 4%, var(--tpc-background-color));
  }
}