/* =========================================================
   Dr Mazharian — design tokens
   Import once, use the CSS vars everywhere.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* ---------- Palette ---------- */
  --nuit:        #0B2545;   /* primary — navy ink */
  --nuit-90:     #1A3253;
  --nuit-80:     #3D506B;
  --nuit-60:     #5C6A81;
  --nuit-40:     #A4ADBE;
  --nuit-20:     #D2D8E2;

  --or:          #C9A84C;   /* hairline accent — gold */
  --or-soft:     #E4D29A;
  --or-deep:     #9A7F2E;

  --ivoire:      #F8F6F1;   /* page background — warm off-white */
  --ivoire-deep: #EFEBE0;
  --ciel:        #EFF4FA;   /* secondary surface — pale blue */
  --ciel-deep:   #DCE6F1;

  --encre:       #2C2C2A;   /* body text — anthracite */
  --encre-soft:  #4E4E49;

  --blanc:       #FFFFFF;

  --trait:       rgba(11, 37, 69, 0.12);
  --trait-soft:  rgba(11, 37, 69, 0.06);
  --trait-or:    rgba(201, 168, 76, 0.45);
  --trait-dark:  rgba(255, 255, 255, 0.12);

  /* semantic colour roles */
  --bg:          var(--ivoire);
  --bg-alt:      var(--ciel);
  --bg-dark:     var(--nuit);
  --surface:     var(--blanc);
  --fg:          var(--encre);
  --fg-soft:     var(--encre-soft);
  --fg-mute:     var(--nuit-60);
  --fg-inverse:  var(--ivoire);
  --accent:      var(--or);

  /* ---------- Typography ---------- */
  --font-display: 'Playfair Display', 'Iowan Old Style', Georgia, serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', Menlo, monospace;

  --t-display:  4.5rem;   /* 72 */
  --t-h1:       3.25rem;  /* 52 */
  --t-h2:       2.25rem;  /* 36 */
  --t-h3:       1.5rem;   /* 24 */
  --t-h4:       1.1875rem;/* 19 */
  --t-lead:     1.25rem;  /* 20 */
  --t-body:     1.0625rem;/* 17 */
  --t-small:    0.9375rem;/* 15 */
  --t-meta:     0.8125rem;/* 13 */
  --t-eyebrow:  0.75rem;  /* 12 */

  --lh-display: 1.05; /* @kind font */
  --lh-heading: 1.18; /* @kind font */
  --lh-lead:    1.55; /* @kind font */
  --lh-body:    1.7; /* @kind font */

  --track-eyebrow: 0.18em;
  --track-tight:   -0.01em;
  --track-display: -0.015em;

  /* ---------- Spacing (8-pt) ---------- */
  --s-0:  0; /* @kind spacing */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  40px;
  --s-8:  56px;
  --s-9:  72px;
  --s-10: 96px;
  --s-11: 128px;
  --s-12: 160px;

  /* ---------- Radii ---------- */
  --r-1:    4px;
  --r-2:    8px;
  --r-3:    14px;
  --r-pill: 999px;

  /* ---------- Borders & shadow ---------- */
  --border:        1px solid var(--trait);
  --border-soft:   1px solid var(--trait-soft);
  --border-or:     1px solid var(--trait-or);
  --border-dark:   1px solid var(--trait-dark);

  --shadow-card:   0 1px 0 rgba(11,37,69,0.04), 0 12px 32px -16px rgba(11,37,69,0.18);
  --shadow-pop:    0 2px 4px rgba(11,37,69,0.06), 0 24px 48px -20px rgba(11,37,69,0.22);
  --shadow-inset:  inset 0 0 0 1px var(--trait);

  /* ---------- Layout ---------- */
  --container: 1240px;
  --measure:   66ch;

  /* ---------- Motion ---------- */
  --ease-soft:    cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
  --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --t-hover:      180ms; /* @kind other */
  --t-reveal:     600ms; /* @kind other */

  color-scheme: light;
}

/* =========================================================
   Base reset (minimal — designed to coexist with prototypes)
   ========================================================= */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'ss01', 'cv11', 'tnum' 0;
}

::selection { background: var(--or-soft); color: var(--nuit); }

/* =========================================================
   Semantic typographic elements
   ========================================================= */

h1, .h1, h2, .h2, h3, .h3, .display {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--nuit);
  margin: 0;
  letter-spacing: var(--track-display);
}

.display { font-size: var(--t-display); line-height: var(--lh-display); }
h1, .h1  { font-size: var(--t-h1);      line-height: var(--lh-heading); }
h2, .h2  { font-size: var(--t-h2);      line-height: var(--lh-heading); }
h3, .h3  { font-size: var(--t-h3);      line-height: var(--lh-heading); font-weight: 500; }

h4, .h4 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--t-h4);
  line-height: 1.4;
  letter-spacing: var(--track-tight);
  color: var(--nuit);
  margin: 0;
}

p, .body { font-size: var(--t-body); line-height: var(--lh-body); margin: 0 0 1em; max-width: var(--measure); }
.lead    { font-size: var(--t-lead); line-height: var(--lh-lead); color: var(--fg-soft); max-width: 52ch; }
.small   { font-size: var(--t-small); }
.meta    { font-size: var(--t-meta); color: var(--fg-mute); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--t-eyebrow);
  font-weight: 600;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--nuit-80);
}
.eyebrow::before {
  content: '';
  width: 18px;
  height: 1px;
  background: var(--or);
}

blockquote, .pullquote {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 1.75rem;
  line-height: 1.35;
  color: var(--nuit);
  margin: 0;
  padding: 0 0 0 24px;
  border-left: 1px solid var(--or);
  max-width: 28ch;
}

a {
  color: var(--nuit);
  text-decoration: none;
  background-image: linear-gradient(var(--or), var(--or));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 1px;
  transition: background-size var(--t-hover) var(--ease-soft);
}
a:hover { background-size: 100% 2px; }

hr {
  border: 0;
  height: 1px;
  background: var(--trait);
  margin: var(--s-7) 0;
}

/* =========================================================
   Primitives
   ========================================================= */

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--s-5);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 52px;
  padding: 0 26px;
  border-radius: var(--r-2);
  font-family: var(--font-body);
  font-size: var(--t-small);
  font-weight: 600;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
  background: var(--nuit);
  color: var(--ivoire);
  cursor: pointer;
  transition: background var(--t-hover) var(--ease-soft), color var(--t-hover) var(--ease-soft), border-color var(--t-hover) var(--ease-soft);
}
.btn:hover  { background: #061a36; }
.btn:active { background: #04122a; }

.btn--ghost {
  background: transparent;
  color: var(--nuit);
  border-color: var(--trait);
}
.btn--ghost:hover { border-color: var(--nuit); }

.btn--gold {
  background: transparent;
  color: var(--nuit);
  border-color: var(--or);
}
.btn--gold:hover { background: var(--or-soft); border-color: var(--or-deep); }
.doctolib-mark { flex: none; display: block; border-radius: 6px; margin-right: -2px; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  font-size: var(--t-meta);
  font-weight: 500;
  background: var(--ciel);
  color: var(--nuit);
  border: 1px solid var(--trait);
}

.card {
  background: var(--surface);
  border: var(--border);
  border-radius: var(--r-3);
  padding: var(--s-6);
}
.card--ciel { background: var(--ciel); border-color: transparent; }
.card--nuit { background: var(--nuit); color: var(--ivoire); border-color: transparent; }
.card--nuit h1, .card--nuit h2, .card--nuit h3 { color: var(--ivoire); }

/* gold hairline under headings (use as needed) */
.rule-or {
  display: inline-block;
  width: 48px;
  height: 1px;
  background: var(--or);
  margin: 0 0 var(--s-4);
}

/* numerals tabular for stats */
.tnum { font-variant-numeric: tabular-nums; }

/* fine-print legal/footer */
.legal { font-size: var(--t-meta); color: var(--fg-mute); letter-spacing: 0.02em; }