/* ============================================================
   Karla BRUNET — Avocat au Barreau du Mans
   Design tokens — version définitive
   Typo : Newsreader (titraille) + Karla (texte)
   Accent : Terre de Sienne
   ============================================================ */

/* Import des polices (Google Fonts) */
@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,300;0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,400&family=Karla:ital,wght@0,300;0,400;0,500;0,600;1,400&display=swap');

:root{
  /* ---------- SOCLE — bleu canard ---------- */
  --canard:            #1C6E78;   /* couleur maison, structure */
  --canard-profond:    #124B52;   /* titres, lettre K, aplats */
  --canard-ink:        #0E393F;   /* fonds sombres (header, footer) */
  --canard-clair:      #9FC6CB;   /* filets, accents doux */
  --canard-pale:       #E7F0F0;   /* halos, focus doux */
  --anthracite:        #22343A;   /* texte de titraille */

  /* ---------- NEUTRES ---------- */
  --paper:             #FAF8F3;   /* arrière-plan général (chaud) */
  --greige:            #EFE9DE;   /* zones calmes */
  --surface:           #FFFFFF;   /* cartes, panneaux */
  --rule:              #D8DEDD;   /* bordures, filets fins */
  --ink:               #20292C;   /* texte courant */
  --mute:              #5C6A6E;   /* texte secondaire */

  /* ---------- ACCENT PRINCIPAL — Terre de Sienne ---------- */
  --accent:            #B0583B;   /* accent, lettre B, filets, décor */
  --accent-deep:       #8F4126;   /* texte/bouton sur blanc (contraste AA) */
  --accent-soft:       #D98A6E;   /* accent sur fond sombre */

  /* ---------- RÉSERVE (usage exceptionnel, hors identité courante) ---------- */
  --laiton:            #BC8A3C;   /* alternative métal, si besoin */
  --laiton-deep:       #8F6721;
  --gres:              #CBA07E;   /* APLAT de surface uniquement, jamais en trait */

  /* ---------- RÔLES D'INTERFACE ---------- */
  --color-bg:          var(--paper);
  --color-bg-dark:     var(--canard-ink);
  --color-surface:     var(--surface);
  --color-text:        var(--ink);
  --color-text-invert: #EAF3F2;
  --color-muted:       var(--mute);
  --color-heading:     var(--canard-ink);
  --color-link:        var(--canard-profond);
  --color-link-hover:  var(--accent-deep);
  --color-border:      var(--rule);
  --color-focus:       var(--accent);
  --btn-bg:            var(--accent-deep);   /* AA sur texte blanc */
  --btn-text:          #FFFFFF;
  --success:           #2E7D5B;
  --error:             #9B2C2C;             /* rouge distinct de l'accent */

  /* ---------- TYPOGRAPHIE ---------- */
  --font-display: 'Newsreader', Georgia, 'Times New Roman', serif;
  --font-body:    'Karla', system-ui, -apple-system, Segoe UI, sans-serif;

  --fs-h1:      clamp(2.375rem, 5.4vw, 4.125rem); /* 38 → 66 px */
  --fs-h2:      clamp(1.8rem, 3.6vw, 2.625rem);   /* 29 → 42 px */
  --fs-h3:      1.375rem;   /* 22 px */
  --fs-h4:      1.125rem;   /* 18 px */
  --fs-lead:    1.125rem;   /* 18 px */
  --fs-body:    1rem;       /* 16 px */
  --fs-small:   0.875rem;   /* 14 px */
  --fs-caption: 0.75rem;    /* 12 px */
  --fs-eyebrow: 0.72rem;    /* ~11.5 px */

  --lh-tight:   1.08;
  --lh-heading: 1.15;
  --lh-body:    1.65;
  --ls-tight:  -0.01em;
  --ls-eyebrow: 0.24em;

  --w-light:  300;
  --w-reg:    400;
  --w-medium: 500;
  --w-semi:   600;

  /* ---------- ESPACEMENT (échelle n × 0.25rem, complète) ---------- */
  --sp-1:  0.25rem;  --sp-2:  0.5rem;  --sp-3:  0.75rem; --sp-4:  1rem;
  --sp-5:  1.25rem;  --sp-6:  1.5rem;  --sp-7:  1.75rem; --sp-8:  2rem;
  --sp-9:  2.25rem;  --sp-10: 2.5rem;  --sp-11: 2.75rem; --sp-12: 3rem;
  --sp-13: 3.25rem;  --sp-14: 3.5rem;  --sp-15: 3.75rem; --sp-16: 4rem;
  --sp-section: 5.5rem;        /* rythme vertical des sections (desktop) */
  --sp-section-mobile: 3.75rem;

  /* ---------- LAYOUT ---------- */
  --container: 1120px;
  --gutter:    2.5rem;   /* 40px desktop */
  --gutter-mobile: 1.5rem;

  /* ---------- RAYONS ---------- */
  --radius-sm:  8px;
  --radius:     12px;
  --radius-lg:  16px;
  --radius-pill: 100px;

  /* ---------- OMBRES ---------- */
  --shadow-card: 0 26px 50px -34px rgba(20, 60, 66, 0.5);
  --shadow-float: 0 40px 80px -50px rgba(14, 57, 63, 0.8);
}

/* Bascule d'accent de réserve (si un jour le laiton est réactivé) :
   ajouter la classe .theme-laiton sur <body>
*/
.theme-laiton{
  --accent:      #BC8A3C;
  --accent-deep: #8F6721;
  --accent-soft: #D9B87A;
}