/* ============================================================
   ANOR — Design System · Direction B « Atelier Chaleureux »
   Token layer. Framework-agnostic (works in HTML / Astro / Next).
   Load this first; everything else consumes these custom properties.
   ============================================================ */

:root {
  /* ---------- 1. BRAND CORE ---------- */
  --anor-amber:    #C2854A;  /* signature warm wood tone — DECORATIVE / large only */
  --anor-caramel:  #8A5A2B;  /* deep wood — primary actions, text-safe on light  */
  --anor-gold:     #E0B05A;  /* warm light glow — DECORATIVE accents only        */
  --anor-ink:      #221E18;  /* soft black (iron) — body text on light           */
  --anor-cream:    #F4ECDD;  /* off-white wall — base background                 */

  /* ---------- 2. WARM NEUTRAL SCALE ---------- */
  --cream-50:  #FBF7EF;
  --cream-100: #F4ECDD;
  --cream-200: #ECE0CC;
  --sand-300:  #DCC9A8;
  --sand-400:  #C9AF85;
  --bark-600:  #6F5535;
  --bark-700:  #4E3B25;
  --bark-800:  #33271A;
  --ink-900:   #221E18;

  /* ---------- 3. SEMANTIC SURFACES ---------- */
  --bg:            var(--cream-50);
  --surface:       #FDFBF6;
  --surface-warm:  var(--cream-100);
  --surface-sunk:  var(--cream-200);
  --on-dark-bg:    var(--ink-900);     /* for inverted (footer) sections */

  /* ---------- 4. SEMANTIC TEXT (all AA on their bg) ---------- */
  --text:          var(--ink-900);     /* 13:1 on cream-50      */
  --text-muted:    var(--bark-600);    /* ~5.2:1 on cream-50    */
  --text-on-dark:  var(--cream-100);   /* body on ink sections  */
  --text-on-primary: var(--cream-50);  /* label on caramel btn  */

  /* ---------- 5. SEMANTIC ROLES ---------- */
  --primary:        var(--anor-caramel);
  --primary-hover:  #74491F;
  --accent:         var(--anor-gold);  /* never text — underlines, marks, glow */
  --border:         var(--sand-300);
  --border-strong:  var(--sand-400);
  --divider:        color-mix(in srgb, var(--bark-600) 22%, transparent);
  --focus-ring:     var(--anor-caramel);

  /* ---------- 6. TYPOGRAPHY ---------- */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* modular scale ~1.24 */
  --text-xs:   0.78rem;   /* 12.5px */
  --text-sm:   0.875rem;  /* 14px   */
  --text-base: 1rem;      /* 16px   */
  --text-md:   1.125rem;  /* 18px   */
  --text-lg:   1.4rem;    /* 22px   */
  --text-xl:   1.85rem;   /* ~30px  */
  --text-2xl:  2.5rem;    /* 40px   */
  --text-3xl:  clamp(2.6rem, 6vw, 4rem);   /* hero */

  --leading-tight: 1.08;
  --leading-snug:  1.25;
  --leading-body:  1.6;

  --tracking-tight: -0.015em;
  --tracking-wide:  0.02em;
  --tracking-kicker: 0.3em;   /* uppercase kickers */

  --weight-body:    400;
  --weight-medium:  500;
  --weight-semibold:600;
  --weight-display: 600;      /* Fraunces optical headings */

  /* ---------- 7. SPACING (4px base) ---------- */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-7:  3rem;
  --space-8:  4rem;
  --space-9:  6rem;
  --space-10: 8rem;

  --container:    1140px;
  --container-text: 68ch;
  --gutter:       clamp(1rem, 5vw, 2.5rem);
  --section-y:    clamp(3.5rem, 9vw, 7rem);

  /* ---------- 8. RADIUS ---------- */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-pill: 999px;

  /* ---------- 9. SHADOW (warm-tinted, low) ---------- */
  --shadow-sm: 0 1px 2px rgba(51,39,26,0.06), 0 1px 3px rgba(51,39,26,0.05);
  --shadow-md: 0 4px 12px rgba(51,39,26,0.08), 0 2px 4px rgba(51,39,26,0.05);
  --shadow-lg: 0 14px 40px rgba(51,39,26,0.12), 0 4px 10px rgba(51,39,26,0.06);
  --glow-gold: 0 0 0 1px rgba(224,176,90,0.4), 0 8px 30px rgba(224,176,90,0.18);

  /* ---------- 10. MOTION ---------- */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft:  cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:   140ms;
  --dur-base:   240ms;
  --dur-slow:   420ms;

  /* ---------- 11. Z ---------- */
  --z-base: 1; --z-sticky: 100; --z-overlay: 500; --z-modal: 1000;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast:0ms; --dur-base:0ms; --dur-slow:0ms; }
}

/* ============================================================
   BASE PRIMITIVES — minimal, opt-in. Sites extend these.
   ============================================================ */

.ds-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2);
  min-height:44px;
  font-family:var(--font-body); font-weight:var(--weight-semibold);
  font-size:var(--text-sm); letter-spacing:var(--tracking-wide);
  padding:0.72em 1.4em; border-radius:var(--radius-md);
  border:1px solid transparent; cursor:pointer; text-decoration:none;
  transition:transform var(--dur-fast) var(--ease-out),
             background var(--dur-base) var(--ease-soft),
             box-shadow var(--dur-base) var(--ease-soft);
}
.ds-btn:active { transform:translateY(1px); }
.ds-btn:focus-visible { outline:2px solid var(--focus-ring); outline-offset:2px; }

.ds-btn--primary { background:var(--primary); color:var(--text-on-primary); }
.ds-btn--primary:hover { background:var(--primary-hover); box-shadow:var(--shadow-md); }

.ds-btn--ghost { background:transparent; color:var(--primary); border-color:var(--border-strong); }
.ds-btn--ghost:hover { background:var(--surface-warm); }

.ds-btn--gold { background:var(--accent); color:var(--ink-900); }
.ds-btn--gold:hover { box-shadow:var(--glow-gold); }

.ds-kicker {
  font-family:var(--font-body); font-weight:var(--weight-semibold);
  font-size:var(--text-xs); text-transform:uppercase;
  letter-spacing:var(--tracking-kicker); color:var(--anor-caramel);
}

.ds-h1 { font-family:var(--font-display); font-weight:var(--weight-display);
  font-size:var(--text-3xl); line-height:var(--leading-tight);
  letter-spacing:var(--tracking-tight); color:var(--text); }
.ds-h2 { font-family:var(--font-display); font-weight:var(--weight-display);
  font-size:var(--text-2xl); line-height:var(--leading-tight); color:var(--text); }
.ds-h3 { font-family:var(--font-display); font-weight:var(--weight-display);
  font-size:var(--text-lg); line-height:var(--leading-snug); color:var(--text); }
.ds-body { font-family:var(--font-body); font-weight:var(--weight-body);
  font-size:var(--text-base); line-height:var(--leading-body); color:var(--text); }
.ds-lead { font-size:var(--text-md); color:var(--text-muted); line-height:var(--leading-body); }