/* ==========================================================================
   Clínica Longevidade e Saúde — Colors & Type
   Brand-defined palette: Vinho Profundo, Rosa Tempo, Marfim Sereno,
                          Areia Essencial, Dourado Vital
   Typeface: Bodrum Sweet (full family, 10 Hair → 19 Black)
   ========================================================================== */

/* ----------  FONT FACES  ---------- */
@font-face {
  font-family: "Bodrum Sweet";
  src: url("fonts/BodrumSweet-10Hair.ttf") format("truetype");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Bodrum Sweet";
  src: url("fonts/BodrumSweet-11Thin.ttf") format("truetype");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Bodrum Sweet";
  src: url("fonts/BodrumSweet-12ExtraLight.ttf") format("truetype");
  font-weight: 250;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Bodrum Sweet";
  src: url("fonts/BodrumSweet-13Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Bodrum Sweet";
  src: url("fonts/BodrumSweet-14Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Bodrum Sweet";
  src: url("fonts/BodrumSweet-14RegularItalic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Bodrum Sweet";
  src: url("fonts/BodrumSweet-15Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Bodrum Sweet";
  src: url("fonts/BodrumSweet-16Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Bodrum Sweet";
  src: url("fonts/BodrumSweet-17ExtraBold.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Bodrum Sweet";
  src: url("fonts/BodrumSweet-18Heavy.ttf") format("truetype");
  font-weight: 850;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Bodrum Sweet";
  src: url("fonts/BodrumSweet-19Black.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* ----------  TOKENS  ---------- */
:root {
  /* Brand palette ------------------------------------------------------- */
  --vinho-profundo: #503B3B;   /* Deep wine — primary dark / text */
  --rosa-tempo:     #B97F80;   /* Time-rose — primary brand colour */
  --marfim-sereno:  #FFFBF4;   /* Serene ivory — primary background */
  --areia-essencial:#D5BA94;   /* Essential sand — secondary warm neutral */

  /* Dourado Vital (gold gradient family) */
  --dourado-vital:        #D8AB4F;
  --dourado-vital-light:  #FFE5B4;
  --dourado-vital-mid:    #F1C05C;
  --dourado-vital-deep:   #CA7600;
  --dourado-vital-gradient: linear-gradient(
    135deg,
    #FFE5B4 0%,
    #F1C05C 35%,
    #D8AB4F 65%,
    #CA7600 100%
  );

  /* Tints for surfaces (derived) ---------------------------------------- */
  --rosa-tempo-08:  rgba(185,127,128,0.08);
  --rosa-tempo-16:  rgba(185,127,128,0.16);
  --rosa-tempo-32:  rgba(185,127,128,0.32);
  --vinho-08:       rgba(80,59,59,0.08);
  --vinho-16:       rgba(80,59,59,0.16);
  --vinho-64:       rgba(80,59,59,0.64);
  --areia-32:       rgba(213,186,148,0.32);

  /* Semantic — foreground / background ---------------------------------- */
  --bg:        var(--marfim-sereno);
  --bg-soft:   #F7EFE7;             /* warm off-ivory for alt sections */
  --bg-rosa:   var(--rosa-tempo);
  --bg-vinho:  var(--vinho-profundo);
  --surface:   #FFFFFF;             /* pure white card */
  --surface-tint: var(--rosa-tempo-08);

  --fg:        var(--vinho-profundo);
  --fg-muted:  var(--vinho-64);
  --fg-soft:   #7A6464;
  --fg-on-dark: var(--marfim-sereno);
  --fg-on-rosa: var(--marfim-sereno);
  --accent:    var(--rosa-tempo);
  --accent-2:  var(--areia-essencial);
  --accent-gold: var(--dourado-vital);

  --border:        rgba(80,59,59,0.12);
  --border-strong: rgba(80,59,59,0.24);
  --divider:       rgba(80,59,59,0.08);

  /* Type ---------------------------------------------------------------- */
  --font-sans: "Bodrum Sweet", "Inter", system-ui, -apple-system,
               "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Bodrum Sweet", "Inter", system-ui, sans-serif;
  --font-script: "Allura", "Dancing Script", "Brush Script MT", cursive; /* signature/handwritten accents */

  /* Type scale (rem-based, 1rem = 16px) */
  --text-xs:   0.75rem;   /* 12 */
  --text-sm:   0.875rem;  /* 14 */
  --text-base: 1rem;      /* 16 */
  --text-md:   1.125rem;  /* 18 */
  --text-lg:   1.25rem;   /* 20 */
  --text-xl:   1.5rem;    /* 24 */
  --text-2xl:  1.875rem;  /* 30 */
  --text-3xl:  2.25rem;   /* 36 */
  --text-4xl:  3rem;      /* 48 */
  --text-5xl:  3.75rem;   /* 60 */
  --text-6xl:  4.75rem;   /* 76 */

  /* Tracking — Bodrum Sweet at scale benefits from generous tracking on
     ALL-CAPS display, near-zero on body */
  --tracking-display:  0.04em;
  --tracking-eyebrow:  0.18em;   /* "CLÍNICA" eyebrow uses very wide tracking */
  --tracking-body:     0.005em;
  --tracking-tight:   -0.01em;

  /* Line-height */
  --leading-tight:  1.04;
  --leading-snug:   1.18;
  --leading-normal: 1.45;
  --leading-loose:  1.65;

  /* Spacing scale (8 + 4 base) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* Radii — soft, organic */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-2xl:  36px;
  --radius-pill: 999px;
  --radius-blob: 50% 40% 55% 45% / 50% 55% 45% 50%;

  /* Shadows — quiet, warm-tinted */
  --shadow-xs: 0 1px 2px rgba(80,59,59,0.06);
  --shadow-sm: 0 4px 12px -4px rgba(80,59,59,0.08);
  --shadow-md: 0 10px 28px -10px rgba(80,59,59,0.12);
  --shadow-lg: 0 20px 50px -16px rgba(80,59,59,0.18);
  --shadow-rosa: 0 16px 40px -16px rgba(185,127,128,0.45);
  --shadow-inset-soft: inset 0 1px 0 rgba(255,255,255,0.6);

  /* Motion */
  --ease-soft:   cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:   180ms;
  --dur-base:   280ms;
  --dur-slow:   520ms;
}

/* ----------  ELEMENT DEFAULTS  ---------- */
html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1 {
  font-family: var(--font-display);
  font-weight: 400;        /* Logo wordmark sets the tone: regular weight, ALL CAPS */
  font-size: var(--text-5xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  color: var(--fg);
  text-wrap: balance;
}
h2, .h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-3xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  color: var(--fg);
  text-wrap: balance;
}
h3, .h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--fg);
}
h4, .h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  letter-spacing: 0.005em;
  color: var(--fg);
}

.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--accent-gold);
}

p, .p {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: var(--leading-loose);
  color: var(--fg);
  text-wrap: pretty;
}
.p-lead {
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  color: var(--fg);
}
.p-muted {
  color: var(--fg-muted);
}

small, .small {
  font-size: var(--text-sm);
  color: var(--fg-muted);
}

.signature {
  font-family: var(--font-script);
  font-weight: 400;
  font-size: var(--text-3xl);
  color: var(--accent-gold);
  letter-spacing: 0;
  text-transform: none;
}

a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-fast) var(--ease-soft),
              color var(--dur-fast) var(--ease-soft);
}
a:hover { border-color: currentColor; }

/* ----------  UTILITIES  ---------- */
.bg-marfim  { background: var(--marfim-sereno); }
.bg-rosa    { background: var(--rosa-tempo);    color: var(--fg-on-rosa); }
.bg-vinho   { background: var(--vinho-profundo);color: var(--fg-on-dark); }
.bg-areia   { background: var(--areia-essencial); color: var(--fg); }
.bg-gold    { background: var(--dourado-vital-gradient); color: var(--vinho-profundo); }

.text-vinho { color: var(--vinho-profundo); }
.text-rosa  { color: var(--rosa-tempo); }
.text-gold  { color: var(--accent-gold); }
.text-areia { color: var(--areia-essencial); }
.text-marfim{ color: var(--marfim-sereno); }