/* ============================================================
   tokens.css — Système de design site-vitrine-avocat (T-02)
   Référence unique des valeurs visuelles.
   Documenté par design/DESIGN_SYSTEM.md ; importé par les
   maquettes (T-03) puis copié en public/assets/css/tokens.css
   après validation du jalon T-04.
   Contrastes vérifiés AA — tableau DESIGN_SYSTEM.md § 9.
   ============================================================ */

:root {
  /* ---------- Couleur ---------- */
  /* Neutres et fonds */
  --color-bg: #FDFBF7;            /* blanc chaud, fond de page */
  --color-sand-100: #F5EEE0;      /* sections alternées, fonds doux */
  --color-sand-200: #EDE2CC;      /* sur-élévation sable */
  --color-sand-300: #E4D7BF;      /* tags, shimmer de chargement */

  /* Encre */
  --color-ink: #1B2A3C;           /* texte courant (≈13.4:1 sur bg) */
  --color-ink-muted: #4C5A6B;     /* méta, aides (≥6:1 sur bg et sand-100) */

  /* Bleu institutionnel */
  --color-primary: #17497F;       /* boutons primaires, en-tête actif, liens forts */
  --color-primary-600: #103A67;   /* survol/actif */
  --color-primary-900: #0C2440;   /* footer, hero foncé, calque photos */

  /* Accent bronze — unique */
  --color-accent: #A5732B;        /* surfaces pleines + texte on-dark, filets */
  --color-accent-700: #7A531D;    /* seul accent autorisé en texte sur fond clair */

  /* Lien éditorial (jamais le bleu navigateur) */
  --color-link: #17497F;
  --color-link-hover: #7A531D;
  --underline-offset: 3px;

  /* Sur fonds foncés */
  --color-on-dark: #FDFBF7;
  --color-on-dark-muted: #C3CDDA; /* ≈7.6:1 sur primary-900 */

  /* Sémantique */
  --color-error: #A82315;
  --color-error-bg: #FBEDEB;
  --color-success: #1E6539;
  --color-success-bg: #EAF3ED;
  --color-warning-ink: #6B5313;

  /* Focus visible : anneau bleu sur fonds clairs, bronze sur fonds sombres
     (les deux ≥ 3:1 vs surface adjacente, WCAG 1.4.11) */
  --color-focus: #17497F;
  --color-focus-on-dark: #D9A441;
  --focus-width: 2px;
  --focus-offset: 2px;
  --focus-ring: var(--focus-width) solid var(--color-focus);
  --focus-ring-on-dark: var(--focus-width) solid var(--color-focus-on-dark);

  /* Bordures */
  --color-border: #D8D3C8;
  --color-border-strong: #B9B2A2;

  /* Calque bichromie des photos (DESIGN_SYSTEM §4) */
  --photo-tint: var(--color-primary-900);

  /* ---------- Typographie ---------- */
  --font-serif: Georgia, "Iowan Old Style", "Times New Roman", serif;
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Échelle fluide : mobile 375 → desktop ≥1200 */
  --text-display: clamp(2.125rem, 1.35rem + 3.4vw, 3.25rem);  /* 34 → 52 px */
  --text-h2: clamp(1.625rem, 1.3rem + 1.4vw, 2.125rem);       /* 26 → 34 px */
  --text-h3: clamp(1.25rem, 1.13rem + 0.5vw, 1.4375rem);      /* 20 → 23 px */
  --text-h4: clamp(1.0625rem, 1.02rem + 0.2vw, 1.125rem);     /* 17 → 18 px */
  --text-body-lg: clamp(1.0625rem, 1rem + 0.3vw, 1.125rem);   /* 17 → 18 px */
  --text-body: clamp(1rem, 0.98rem + 0.1vw, 1.0625rem);       /* 16 → 17 px */
  --text-sm: 0.875rem;                                        /* 14 px */
  --text-xs: 0.75rem;                                         /* 12 px */

  --leading-tight: 1.15;
  --leading-snug: 1.3;
  --leading-normal: 1.65;
  --tracking-wide: 0.08em;
  --measure: 68ch;

  /* ---------- Espacement ---------- */
  --space-1: 0.25rem;   /* 4 px  */
  --space-2: 0.5rem;    /* 8 px  */
  --space-3: 0.75rem;   /* 12 px */
  --space-4: 1rem;      /* 16 px */
  --space-5: 1.25rem;   /* 20 px */
  --space-6: 1.5rem;    /* 24 px */
  --space-7: 2rem;      /* 32 px */
  --space-8: 2.5rem;    /* 40 px */
  --space-9: 3.5rem;    /* 56 px */
  --space-10: 5rem;     /* 80 px */

  /* ---------- Mise en page ---------- */
  --container-max: 1200px;
  --container-pad: var(--space-5);          /* 20 px mobile */
  --grid-gutter: 1.25rem;                   /* 20 px < 768 */
  --section-py: var(--space-9);             /* bande mobile */
  --cols-card: 1;                           /* cartes empilées < 768 */
  --header-h: 72px;
  --tap-target: 44px;

  /* ---------- Rayons ---------- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-full: 999px;

  /* ---------- Bordures ---------- */
  --border-1: 1px solid var(--color-border);
  --border-2: 2px solid var(--color-primary);

  /* ---------- Ombures ---------- */
  --shadow-sm: 0 1px 2px rgb(12 36 64 / 0.08), 0 1px 4px rgb(12 36 64 / 0.06);
  --shadow-md: 0 4px 12px rgb(12 36 64 / 0.12), 0 2px 4px rgb(12 36 64 / 0.08);

  /* ---------- Z-index ---------- */
  --z-header: 40;
  --z-mobile-nav: 50;
  --z-banner: 60;

  /* ---------- Motion ---------- */
  --motion-fast: 120ms;
  --motion-base: 180ms;
  --motion-slow: 240ms;
  --ease-out: cubic-bezier(0.2, 0.8, 0.3, 1);
}

/* Tablette ≥ 768 : gouttière et gabarits (DESIGN_SYSTEM §8) */
@media (min-width: 768px) {
  :root {
    --container-pad: var(--space-7);   /* 32 px */
    --grid-gutter: 1.5rem;             /* 24 px */
    --cols-card: 2;
  }
}

/* Desktop ≥ 1200 : sections pleines */
@media (min-width: 1200px) {
  :root {
    --section-py: var(--space-10);     /* 80 px */
    --cols-card: 3;                    /* avocats : 4 via grille 12 colonnes */
  }
}

/* Mouvement réduit : durées neutralisées (règle globale, DESIGN_SYSTEM §8) */
@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-fast: 0ms;
    --motion-base: 0ms;
    --motion-slow: 0ms;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}