/* ============================================================
   Carvalho Fisioterapia — Design Tokens
   Drop into any HTML: <link rel="stylesheet" href="colors_and_type.css">
   Then use vars: color: var(--ink); font: var(--h1);
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&family=Montserrat:wght@300;400;500;600;700&display=swap");

:root {
  /* ---------- COLOR ---------- */

  /* Sage scale — the brand */
  --sage-100: #e4ece8;
  --sage-200: #c7d6cf;
  --sage-300: #a8c2b9;
  --sage-400: #8eada3;
  --sage-500: #72978c; /* PRIMARY — the brand green */
  --sage-600: #557b71;
  --sage-700: #3f6259; /* deep ground (posters, hero) */
  --sage-800: #2c4a43;
  --sage-900: #1a302b;

  /* Surfaces */
  --cream: #f6f4ef;     /* page background */
  --paper: #ffffff;     /* card surface */

  /* Ink / text */
  --ink: #1e2a26;        /* primary text on light */
  --ink-soft: #4a5752;   /* secondary text */
  --ink-mute: #7d8a85;   /* tertiary / captions */

  /* On-dark */
  --on-dark: #f6f4ef;
  --on-dark-soft: #d8e0dc;
  --on-dark-mute: #a8c2b9;

  /* Accents — used sparingly */
  --accent-clay: #c97e5b;   /* rare CTA */
  --accent-warmth: #e7d3b3; /* tonal contrast highlight */

  /* Semantic */
  --success: #5b8a6f;
  --warning: #c97e5b;
  --danger:  #b8553f;
  --info:    var(--sage-600);

  /* ---------- TYPE ---------- */
  --font-display: "Cormorant Garamond", "Cormorant", "Playfair Display", Georgia, serif;
  --font-body:    "Montserrat", "Inter", system-ui, -apple-system, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Type ramp — semantic */
  --h1: italic 600 clamp(48px, 7vw, 88px) / 1.05 var(--font-display);
  --h2: 500 clamp(36px, 5vw, 56px) / 1.1 var(--font-display);
  --h3: italic 500 clamp(28px, 3.5vw, 40px) / 1.15 var(--font-display);
  --h4: 600 22px / 1.2 var(--font-body);
  --eyebrow: 500 13px / 1 var(--font-body); /* tracked +0.14em in component */

  --body-lg: 400 19px / 1.55 var(--font-body);
  --body:    400 16px / 1.6  var(--font-body);
  --body-sm: 400 14px / 1.55 var(--font-body);
  --caption: 500 12px / 1.4  var(--font-body);

  --button: 500 15px / 1 var(--font-body);
  --chip:   500 16px / 1.2 var(--font-body);

  /* Logo wordmark — used inside <Logo /> */
  --wordmark: 300 22px / 1 var(--font-body);
  --wordmark-tagline: italic 400 14px / 1 var(--font-display);

  /* ---------- SPACING (8pt soft grid) ---------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;

  /* ---------- RADIUS ---------- */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-card: 20px;
  --radius-lg: 28px;
  --radius-pill: 999px;
  --radius-arch: 200px 200px 12px 12px; /* signature poster arch */

  /* ---------- SHADOW ---------- */
  --shadow-sm: 0 1px 2px rgba(31, 42, 38, 0.06);
  --shadow-md: 0 8px 24px rgba(31, 42, 38, 0.08);
  --shadow-lg: 0 24px 48px rgba(31, 42, 38, 0.10);
  --shadow-inner: inset 0 1px 0 rgba(255, 255, 255, 0.4);

  /* ---------- MOTION ---------- */
  --ease-calm: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 180ms;
  --dur-base: 280ms;
  --dur-slow: 420ms;

  /* ---------- LAYOUT ---------- */
  --content-max: 1180px;
  --content-pad: clamp(20px, 5vw, 64px);
  --section-y: clamp(64px, 10vw, 128px);
}

/* ---------- ELEMENT DEFAULTS ---------- */
html, body {
  background: var(--cream);
  color: var(--ink);
  font: var(--body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection {
  background: var(--sage-500);
  color: var(--on-dark);
}

h1 { font: var(--h1); color: var(--ink); margin: 0; letter-spacing: -0.01em; }
h2 { font: var(--h2); color: var(--ink); margin: 0; letter-spacing: -0.005em; }
h3 { font: var(--h3); color: var(--ink); margin: 0; }
h4 { font: var(--h4); color: var(--ink); margin: 0; }

p  { font: var(--body); color: var(--ink); margin: 0; text-wrap: pretty; }
small { font: var(--body-sm); color: var(--ink-soft); }

a {
  color: var(--sage-700);
  text-decoration: underline;
  text-decoration-color: var(--sage-300);
  text-underline-offset: 3px;
  transition: color var(--dur-fast) var(--ease-calm),
              text-decoration-color var(--dur-fast) var(--ease-calm);
}
a:hover {
  color: var(--sage-800);
  text-decoration-color: var(--sage-700);
}

/* ---------- UTILITY ---------- */
.eyebrow {
  font: var(--eyebrow);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sage-700);
}

.wordmark {
  font: var(--wordmark);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.wordmark__tagline {
  font: var(--wordmark-tagline);
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}