/* =========================================================================
   Filipe Côrtes — Design Tokens
   Web design exclusivo para profissionais da saúde autônomos
   ========================================================================= */

/* ---------- Fonts ---------------------------------------------------------- */
/* Playfair Display via Google Fonts — used ONLY for headings, hero, logo */
@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&display=swap");

/* Satoshi — local brand fonts (variable) */
@font-face {
  font-family: "Satoshi";
  src: url("fonts/Satoshi-Variable.ttf") format("truetype-variations"),
       url("fonts/Satoshi-Variable.ttf") format("truetype");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("fonts/Satoshi-VariableItalic.ttf") format("truetype-variations"),
       url("fonts/Satoshi-VariableItalic.ttf") format("truetype");
  font-weight: 300 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ---------- Color · Dark mode (primary) -------------------------------- */
  --preto-quente:    #181410; /* base bg, hero bg */
  --grafite:         #2E2820; /* cards, secondary surfaces, nav */
  --mostarda:        #C49A0F; /* primary accent — logo, CTA, highlights */
  --mostarda-escuro: #8A6A00; /* hover, pressed, weighty borders */
  --off-white:       #F5F0E8; /* primary text on dark */
  --areia:           #C8B99A; /* secondary text, captions */

  /* ---------- Color · Light mode (print, light sections) ----------------- */
  --creme:           #FDFBFA; /* light bg */

  /* ---------- Semantic · Dark (default) ---------------------------------- */
  --bg:              var(--preto-quente);
  --surface:         var(--grafite);
  --fg:              var(--off-white);
  --fg-muted:        var(--areia);
  --accent:          var(--mostarda);
  --accent-hover:    var(--mostarda-escuro);

  /* Lines, borders, hairlines */
  --border-faint:    rgba(196, 154, 15, 0.20);  /* card border */
  --border-line:     rgba(196, 154, 15, 0.30);  /* section divider */
  --border-strong:   var(--mostarda);

  /* ---------- Type ------------------------------------------------------- */
  --font-display: "Playfair Display", "Times New Roman", Georgia, serif;
  --font-sans:    "Satoshi", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Scale — strict three-size-per-page rule applies in real layouts */
  --fs-hero:    72px; /* H1, hero — Playfair Display 700 */
  --fs-h1:      56px;
  --fs-h2:      36px; /* section title — Playfair Display 700 */
  --fs-h3:      20px; /* card title — Satoshi 500 */
  --fs-body:    16px; /* body — Satoshi 400 */
  --fs-button:  15px; /* button — Satoshi 500 */
  --fs-meta:    13px; /* caption, meta — Satoshi 400 */

  --lh-tight:  1.15;
  --lh-snug:   1.30;
  --lh-body:   1.70;

  --tracking-tight:  -0.01em;
  --tracking-button: 0.01em;

  /* Measure */
  --measure: 65ch;

  /* ---------- Geometry --------------------------------------------------- */
  --radius-sm: 4px;  /* buttons */
  --radius-md: 8px;  /* cards */

  --border-1: 1px;   /* hairline only — never thick */

  /* ---------- Spacing ---------------------------------------------------- */
  /* Generous, sober, never cramped */
  --s-1:   4px;
  --s-2:   8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;   /* card padding */
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;   /* section vertical rhythm */
  --s-10: 128px;

  /* Button paddings (locked by spec) */
  --btn-pad-y: 14px;
  --btn-pad-x: 28px;

  /* ---------- Motion ----------------------------------------------------- */
  --ease:      cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:  150ms;
  --dur:       220ms;
}

/* =========================================================================
   Semantic primitives — drop-in element styles
   ========================================================================= */

.fc-display,
.fc-h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-hero);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
  margin: 0;
}

.fc-h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
  margin: 0;
}

.fc-h3 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  color: var(--fg);
  margin: 0;
}

.fc-body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-muted);
  max-width: var(--measure);
  margin: 0;
}

.fc-meta {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-meta);
  line-height: 1.5;
  color: var(--fg-muted);
  letter-spacing: 0.02em;
  margin: 0;
}

/* Eyebrow — the short mustard tick or label that precedes a section title */
.fc-eyebrow {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.fc-eyebrow::before {
  content: "";
  width: 24px;
  height: 1px;
  background: var(--accent);
}

/* =========================================================================
   Buttons
   ========================================================================= */

.fc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-button);
  letter-spacing: var(--tracking-button);
  padding: var(--btn-pad-y) var(--btn-pad-x);
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur) var(--ease),
              color var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}

.fc-btn--primary {
  background: var(--accent);
  color: var(--preto-quente);
}
.fc-btn--primary:hover { background: var(--accent-hover); }

.fc-btn--secondary {
  background: transparent;
  color: var(--accent);
  border-color: var(--accent);
}
.fc-btn--secondary:hover {
  background: var(--accent);
  color: var(--preto-quente);
}

/* =========================================================================
   Card
   ========================================================================= */

.fc-card {
  background: var(--surface);
  border: 1px solid var(--border-faint);
  border-radius: var(--radius-md);
  padding: var(--s-6);
}

/* =========================================================================
   Divider
   ========================================================================= */

.fc-divider {
  border: 0;
  border-top: 1px solid var(--border-line);
  margin: var(--s-9) 0;
}

/* =========================================================================
   Link
   ========================================================================= */

.fc-link {
  color: var(--fg);
  text-decoration: none;
  border-bottom: 1px solid var(--accent);
  padding-bottom: 2px;
  transition: color var(--dur) var(--ease);
}
.fc-link:hover { color: var(--accent); }