/* ──────────────────────────────────────────────────────────────────
   OriaCare Design System — Foundations
   Inteligência que orienta o cuidado.
   ────────────────────────────────────────────────────────────────── */

/* ── Webfonts ─────────────────────────────────────────────────
   Onest (display) + Manrope (text) — both shipped locally as .ttf
   in fonts/. No external font services are required. */

@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: url('fonts/Onest-Thin.ttf') format('truetype');
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url('fonts/Onest-ExtraLight.ttf') format('truetype');
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('fonts/Onest-Light.ttf') format('truetype');
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/Onest-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/Onest-Medium.ttf') format('truetype');
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/Onest-SemiBold.ttf') format('truetype');
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/Onest-Bold.ttf') format('truetype');
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('fonts/Onest-ExtraBold.ttf') format('truetype');
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('fonts/Onest-Black.ttf') format('truetype');
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url('fonts/Manrope-ExtraLight.ttf') format('truetype');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('fonts/Manrope-Light.ttf') format('truetype');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/Manrope-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/Manrope-Medium.ttf') format('truetype');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/Manrope-SemiBold.ttf') format('truetype');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/Manrope-Bold.ttf') format('truetype');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('fonts/Manrope-ExtraBold.ttf') format('truetype');
}

:root {
  /* ── Brand colors ─────────────────────────────────────────────── */
  /* Primary — "Petróleo": deep teal, used for headings, dark surfaces, primary CTAs */
  --oria-petroleo:        rgb(10, 61, 79);   /* #0A3D4F */
  --oria-petroleo-deep:   rgb(10, 31, 40);   /* #0A1F28 — darkest, near-black surfaces */
  --oria-petroleo-600:    rgb(14, 84, 102);  /* #0E5466 — gradient mid */
  --oria-petroleo-500:    rgb(13, 110, 122); /* #0D6E7A — gradient end */
  --oria-petroleo-300:    rgb(159, 196, 204);/* #9FC4CC — soft on dark */
  --oria-petroleo-100:    rgb(207, 224, 229);/* #CFE0E5 — paragraph on dark */

  /* Accent — "Teal": vitality, action, semantic links + labels */
  --oria-teal:            rgb(13, 148, 136); /* #0D9488 */
  --oria-teal-700:        rgb(14, 122, 130); /* #0E7A82 — hover */
  --oria-teal-600:        rgb(26, 95, 114);  /* #1A5F72 — strokes */

  /* Neutral — "Areia": warm sand background, the calm of the brand */
  --oria-areia:           rgb(250, 247, 242);/* #FAF7F2 — primary canvas */
  --oria-areia-200:       rgb(243, 239, 232);/* #F3EFE8 — chrome / toolbars */
  --oria-areia-300:       rgb(241, 236, 226);/* #F1ECE2 — gradient pair */

  /* Functional neutrals */
  --oria-white:           rgb(255, 255, 255);
  --oria-rule:            rgb(230, 226, 219);/* #E6E2DB — borders, dividers */
  --oria-text-muted:      rgb(90, 102, 112); /* #5A6670 — body, labels */

  /* Semantic */
  --oria-error:           rgb(192, 57, 43);  /* #C0392B — used for "Não é" lists */

  /* ── Surface / semantic aliases ──────────────────────────────── */
  --bg-canvas:            var(--oria-areia);
  --bg-surface:           var(--oria-white);
  --bg-surface-quiet:     var(--oria-areia);
  --bg-dark:              var(--oria-petroleo);
  --bg-darker:            var(--oria-petroleo-deep);

  --fg-strong:            var(--oria-petroleo);
  --fg-body:              var(--oria-petroleo-deep);
  --fg-muted:             var(--oria-text-muted);
  --fg-on-dark:           var(--oria-areia);
  --fg-muted-on-dark:     var(--oria-petroleo-100);
  --fg-label-on-dark:     var(--oria-petroleo-300);
  --accent:               var(--oria-teal);

  --border-rule:          var(--oria-rule);

  /* ── Type families ───────────────────────────────────────────── */
  --font-display: 'Onest', 'Inter', system-ui, -apple-system, sans-serif;
  --font-text:    'Manrope', 'Inter', system-ui, -apple-system, sans-serif;

  /* ── Radii ───────────────────────────────────────────────────── */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 9999px;

  /* ── Spacing scale (4-base, generous) ────────────────────────── */
  --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-14: 56px;

  /* ── Elevation ───────────────────────────────────────────────── */
  --shadow-card:
    0px 8px 10px -6px rgba(0,0,0,0.1),
    0px 20px 25px -5px rgba(0,0,0,0.1);
  --shadow-soft:
    0px 1px 2px rgba(10, 61, 79, 0.04),
    0px 4px 12px rgba(10, 61, 79, 0.06);

  /* ── Motion ──────────────────────────────────────────────────── */
  --ease-calm: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 140ms;
  --dur-base: 220ms;
  --dur-slow: 400ms;

  /* ── Brand gradient (petroleo) ──────────────────────────────── */
  --gradient-petroleo: linear-gradient(
    rgb(10,61,79) 0%,
    rgb(14,84,102) 60%,
    rgb(13,110,122) 100%
  );
  --gradient-areia: linear-gradient(
    rgb(250,247,242) 0%,
    rgb(241,236,226) 100%
  );
}

/* ── Base elements ───────────────────────────────────────────── */
html, body {
  background: var(--bg-canvas);
  color: var(--fg-body);
  font-family: var(--font-text);
  font-size: 16px;
  line-height: 24px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ── Display & headings (Onest) ──────────────────────────────── */
.oria-display {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 72px;
  line-height: 72px;
  letter-spacing: -3px;
  color: var(--fg-strong);
}

.oria-h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 56px;
  line-height: 56px;
  letter-spacing: -2.5px;
  color: var(--fg-strong);
}

.oria-h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 30px;
  line-height: 36px;
  letter-spacing: -1px;
  color: var(--fg-strong);
}

.oria-h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  line-height: 33px;
  letter-spacing: -0.8px;
  color: var(--fg-strong);
}

.oria-quote {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 44px;
  line-height: 66px;
  letter-spacing: -1.5px;
}

/* ── Body text (Manrope) ─────────────────────────────────────── */
.oria-lead {
  font-family: var(--font-text);
  font-size: 18px;
  line-height: 28px;
  letter-spacing: -0.3px;
  color: var(--fg-muted);
}

.oria-body {
  font-family: var(--font-text);
  font-size: 16px;
  line-height: 24px;
  color: var(--fg-body);
}

.oria-body-muted {
  font-family: var(--font-text);
  font-size: 16px;
  line-height: 24px;
  color: var(--fg-muted);
}

.oria-small {
  font-family: var(--font-text);
  font-size: 14px;
  line-height: 20px;
  color: var(--fg-muted);
}

/* The "eyebrow" — universal to OriaCare. Used everywhere
   for section numbering, kickers, and meta lines. */
.oria-eyebrow {
  font-family: var(--font-text);
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 3.6px;
  color: var(--accent);
  text-transform: none;  /* the source mixes case; rely on hand-cased copy */
}

.oria-eyebrow--soft {
  letter-spacing: 1.2px;
  color: var(--accent);
}

.oria-eyebrow--on-dark {
  color: var(--fg-label-on-dark);
}

.oria-caption {
  font-family: var(--font-text);
  font-weight: 500;
  font-size: 11px;
  line-height: 16.5px;
  letter-spacing: 2.2px;
  color: var(--accent);
}