/*
 * tokens.css — Variables CSS du thème Société Avis
 * Design : Product + Editorial Minimalism
 * Palette : navy profond / blanc chaud / or sobre
 */

:root {
  /* ---- Couleurs principales ---- */
  --sa-ink:        #0C1B33;   /* Navy profond — headlines, liens primaires */
  --sa-ink-mid:    #2D4160;   /* Navy moyen — hover, accents secondaires */
  --sa-slate:      #4B5563;   /* Texte courant */
  --sa-muted:      #9CA3AF;   /* Texte secondaire, métadonnées */
  --sa-subtle:     #D1D5DB;   /* Éléments décoratifs discrets */

  /* ---- Couleur d'accent — or sobre, utilisé avec parcimonie ---- */
  --sa-gold:       #A8832A;   /* Étoiles, badges de qualité */
  --sa-gold-light: #F5EDD6;   /* Fond badge, highlight */
  --sa-gold-dark:  #7A5E1A;   /* Hover or */

  /* ---- Surfaces & fonds ---- */
  --sa-bg:         #F8F7F4;   /* Fond global — off-white chaud */
  --sa-bg-alt:     #F1F0EC;   /* Fond alternatif — sections secondaires */
  --sa-surface:    #FFFFFF;   /* Cartes, panneaux */
  --sa-surface-2:  #FAFAF8;   /* Fond de surface légèrement teinté */

  /* ---- Bordures ---- */
  --sa-border:     #E5E1DA;   /* Bordure standard */
  --sa-border-mid: #D0CCC4;   /* Bordure accentuée */

  /* ---- États sémantiques ---- */
  --sa-positive:   #166534;   /* Vert confirmé / vérifié */
  --sa-positive-bg:#DCFCE7;
  --sa-error:      #991B1B;
  --sa-error-bg:   #FEE2E2;
  --sa-warning:    #92400E;
  --sa-warning-bg: #FEF3C7;

  /* ---- Typographie ---- */
  --sa-font-serif: 'DM Serif Display', Georgia, serif;
  --sa-font-sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --sa-text-xs:   0.75rem;    /* 12px */
  --sa-text-sm:   0.875rem;   /* 14px */
  --sa-text-base: 1rem;       /* 16px */
  --sa-text-md:   1.0625rem;  /* 17px */
  --sa-text-lg:   1.125rem;   /* 18px */
  --sa-text-xl:   1.25rem;    /* 20px */
  --sa-text-2xl:  1.5rem;     /* 24px */
  --sa-text-3xl:  1.875rem;   /* 30px */
  --sa-text-4xl:  2.25rem;    /* 36px */
  --sa-text-5xl:  3rem;       /* 48px */
  --sa-text-6xl:  3.75rem;    /* 60px */

  --sa-leading-tight:  1.2;
  --sa-leading-snug:   1.35;
  --sa-leading-normal: 1.6;
  --sa-leading-loose:  1.8;

  --sa-weight-light:    300;
  --sa-weight-regular:  400;
  --sa-weight-medium:   500;
  --sa-weight-semibold: 600;

  /* ---- Espacements ---- */
  --sa-space-1:  0.25rem;   /* 4px */
  --sa-space-2:  0.5rem;    /* 8px */
  --sa-space-3:  0.75rem;   /* 12px */
  --sa-space-4:  1rem;      /* 16px */
  --sa-space-5:  1.25rem;   /* 20px */
  --sa-space-6:  1.5rem;    /* 24px */
  --sa-space-8:  2rem;      /* 32px */
  --sa-space-10: 2.5rem;    /* 40px */
  --sa-space-12: 3rem;      /* 48px */
  --sa-space-16: 4rem;      /* 64px */
  --sa-space-20: 5rem;      /* 80px */
  --sa-space-24: 6rem;      /* 96px */
  --sa-space-32: 8rem;      /* 128px */

  /* ---- Rayons ---- */
  --sa-radius-sm:  4px;
  --sa-radius:     8px;
  --sa-radius-md:  12px;
  --sa-radius-lg:  16px;
  --sa-radius-xl:  24px;
  --sa-radius-full: 9999px;

  /* ---- Ombres ---- */
  --sa-shadow-xs:  0 1px 2px rgba(12, 27, 51, 0.04);
  --sa-shadow-sm:  0 2px 6px rgba(12, 27, 51, 0.07);
  --sa-shadow:     0 4px 16px rgba(12, 27, 51, 0.09);
  --sa-shadow-md:  0 8px 28px rgba(12, 27, 51, 0.11);
  --sa-shadow-lg:  0 16px 48px rgba(12, 27, 51, 0.14);

  /* ---- Transitions ---- */
  --sa-transition-fast:   150ms ease;
  --sa-transition:        220ms ease;
  --sa-transition-slow:   350ms ease;

  /* ---- Layout ---- */
  --sa-container-max: 1280px;
  --sa-container-pad: var(--sa-space-6);
  --sa-nav-height:    72px;
}

@media (max-width: 768px) {
  :root {
    --sa-container-pad: var(--sa-space-4);
    --sa-nav-height: 64px;
    --sa-text-5xl: 2.5rem;
    --sa-text-6xl: 3rem;
  }
}