/* ============================================================
   DOGTOR — Design System
   Vétérinaire à domicile premium · Istres, Provence
   ------------------------------------------------------------
   Forked from "The Lab" foundation (editorial serif + mono labels,
   warm neutral palette, square corners, hairline dividers) and
   re-accented for Provence: sage green primary, soft terracotta
   secondary, on cream/sand neutrals. Shared by web + mobile app.
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400;1,600&family=IBM+Plex+Mono:wght@300;400;500;600&family=IBM+Plex+Sans:wght@300;400;500;600&display=swap");

:root {
  /* ---- Neutrals (inherited foundation) ---- */
  --carbon:        #20231f;   /* warm near-black ink */
  --carbon-soft:   #2c302a;
  --graphite:      #4d4f48;   /* secondary ink */
  --graphite-2:    #6e7067;
  --graphite-3:    #93948b;
  --stone:         #e2d1bd;   /* warm sand */
  --stone-deep:    #c2a888;
  --stone-soft:    #ecdfcd;
  --bone:          #faf5ee;   /* card surface */
  --bone-2:        #f1e9dd;
  --paper:         #f6efe6;   /* page background */
  --cream:         #fbf7f0;

  /* ---- Provence accents ---- */
  --sage:          #5e7259;   /* PRIMARY accent — sage green */
  --sage-deep:     #45543f;   /* hover / deep forest */
  --sage-soft:     #8fa085;
  --sage-tint:     #e4e8de;   /* pale sage wash */
  --terracotta:    #c0805f;   /* SECONDARY warm accent */
  --terracotta-deep:#a3654a;
  --terracotta-soft:#e7cab6;
  --terracotta-tint:#f3e2d6;
  --olive:         #7a7a4e;

  /* ---- Hairlines ---- */
  --hairline:      rgba(32, 35, 31, 0.13);
  --hairline-soft: rgba(32, 35, 31, 0.07);
  --hairline-strong: rgba(32, 35, 31, 0.22);

  /* ---- Semantic surfaces ---- */
  --bg:            var(--paper);
  --bg-elev:       var(--bone);
  --bg-inverse:    var(--carbon);

  /* ---- Semantic text ---- */
  --fg-1:          var(--carbon);
  --fg-2:          var(--graphite);
  --fg-3:          var(--graphite-2);
  --fg-mute:       var(--graphite-3);
  --fg-inverse:    var(--bone);
  --fg-accent:     var(--sage-deep);

  /* ---- Borders ---- */
  --line:          var(--hairline);
  --line-soft:     var(--hairline-soft);
  --line-dark:     rgba(250, 245, 238, 0.18);

  /* ---- Status ---- */
  --status-ok:     #5e7259;
  --status-warn:   #c08a4a;
  --status-alert:  #a8503c;

  /* ---- Fonts ---- */
  --font-serif:    "Spectral", "Source Serif Pro", Georgia, serif;
  --font-mono:     "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-sans:     "IBM Plex Sans", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;

  /* ---- Type scale ---- */
  --type-display:   400 88px/0.98 var(--font-serif);
  --type-display-l: 400 64px/1.02 var(--font-serif);
  --type-display-s: 400 44px/1.06 var(--font-serif);
  --type-h1:        400 34px/1.12 var(--font-serif);
  --type-h2:        400 26px/1.2  var(--font-serif);
  --type-h3:        500 20px/1.3  var(--font-serif);
  --type-h4:        500 16px/1.35 var(--font-serif);
  --type-body-l:    400 18px/1.6  var(--font-serif);
  --type-body:      400 16px/1.65 var(--font-serif);
  --type-body-s:    400 14px/1.6  var(--font-serif);
  --type-ui:        400 15px/1.45 var(--font-sans);
  --type-ui-s:      400 13px/1.45 var(--font-sans);
  --type-eyebrow:   400 11px/1.4  var(--font-mono);
  --type-label:     400 12px/1.5  var(--font-mono);
  --type-caption:   400 11px/1.5  var(--font-mono);
  --type-data:      500 13px/1.4  var(--font-mono);

  /* ---- Tracking ---- */
  --tracking-eyebrow:  0.18em;
  --tracking-label:    0.1em;
  --tracking-tight:   -0.01em;
  --tracking-display: -0.02em;

  /* ---- Spacing (4px base) ---- */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
  --space-9: 96px; --space-10: 128px;
  --gutter: 24px;  --gutter-lg: 48px; --section-pad: 96px;

  /* ---- Radii ---- */
  --radius-0: 0; --radius-1: 2px; --radius-2: 4px; --radius-3: 8px; --radius-4: 12px;
  --radius-card: 3px; --radius-button: 0; --radius-input: 2px; --radius-pill: 999px;

  /* ---- Shadows (used sparingly) ---- */
  --shadow-1: 0 1px 2px rgba(32,35,31,0.04), 0 0 0 1px var(--line-soft);
  --shadow-2: 0 8px 30px rgba(32,35,31,0.07), 0 0 0 1px var(--line-soft);
  --shadow-3: 0 28px 64px rgba(32,35,31,0.14), 0 0 0 1px var(--line);
  --shadow-inset: inset 0 0 0 1px var(--line);
}

/* ------------------------------------------------------------ BASE */
* { box-sizing: border-box; }
html, body {
  margin: 0;
  background: var(--bg);
  color: var(--fg-1);
  font: var(--type-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1,h2,h3,h4 { margin: 0; }
h1 { font: var(--type-h1); letter-spacing: var(--tracking-tight); }
h2 { font: var(--type-h2); letter-spacing: var(--tracking-tight); }
h3 { font: var(--type-h3); }
h4 { font: var(--type-h4); }
p  { margin: 0 0 1em; }
a  { color: inherit; }
img { display: block; max-width: 100%; }
code, kbd, samp { font: var(--type-data); }
::selection { background: var(--sage); color: var(--bone); }

/* ------------------------------------------------------------ UTILITIES */
.eyebrow {
  font: var(--type-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-2);
}
.label-mono {
  font: var(--type-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--fg-2);
}
.display    { font: var(--type-display);   letter-spacing: var(--tracking-display); }
.display-l  { font: var(--type-display-l); letter-spacing: var(--tracking-display); }
.display-s  { font: var(--type-display-s); letter-spacing: var(--tracking-display); }
.data       { font: var(--type-data); font-feature-settings: "tnum"; }
.italic     { font-style: italic; }
.accent     { color: var(--fg-accent); }
.muted      { color: var(--fg-mute); }
.serif      { font-family: var(--font-serif); }

/* ------------------------------------------------------------ BUTTONS */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font: var(--type-label); letter-spacing: var(--tracking-label);
  text-transform: uppercase; padding: 16px 28px; border: 0;
  border-radius: var(--radius-button); cursor: pointer;
  text-decoration: none; transition: background .15s ease, color .15s ease, border-color .15s ease;
  white-space: nowrap;
}
.btn:active { transform: scale(.985); }
.btn-primary { background: var(--sage); color: var(--bone); }
.btn-primary:hover { background: var(--sage-deep); }
.btn-dark { background: var(--carbon); color: var(--bone); }
.btn-dark:hover { background: var(--carbon-soft); }
.btn-ghost { background: transparent; color: var(--carbon); box-shadow: inset 0 0 0 1px var(--carbon); }
.btn-ghost:hover { background: var(--carbon); color: var(--bone); }
.btn-terra { background: var(--terracotta); color: var(--bone); }
.btn-terra:hover { background: var(--terracotta-deep); }
.btn-link { background: transparent; padding: 14px 0; border-bottom: 1px solid currentColor; }
.btn-sm { padding: 11px 18px; }

/* ------------------------------------------------------------ PILLS / CHIPS */
.pill {
  display: inline-flex; align-items: center; gap: 7px;
  font: var(--type-caption); letter-spacing: var(--tracking-label);
  text-transform: uppercase; padding: 6px 12px;
  border-radius: var(--radius-pill); background: var(--sage-tint); color: var(--sage-deep);
}
.pill-dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* hairline helpers */
.hairline   { border-top: 1px solid var(--line); }
.hairline-b { border-bottom: 1px solid var(--line); }