/* =============================================================
   IoTherm × Bionica Design System
   Tokens — colors, typography, spacing, radii, shadows
   ============================================================= */

/* ---------- Fonts (load via @font-face from /fonts) ---------- */
@font-face {
  font-family: "Sora";
  src: url("./fonts/Sora-Variable.ttf") format("truetype-variations"),
       url("./fonts/Sora-Variable.ttf") format("truetype");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}
/* Itálico de "Sora": arquivo variable-italic não faz parte do pacote de
   fontes entregue. O navegador sintetiza o itálico a partir do peso normal. */
@font-face {
  font-family: "Noto Sans";
  src: url("./fonts/NotoSans-Variable.ttf") format("truetype-variations"),
       url("./fonts/NotoSans-Variable.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
/* Itálico de "Noto Sans": arquivo variable-italic não faz parte do pacote de
   fontes entregue. O navegador sintetiza o itálico a partir do peso normal. */
@font-face {
  font-family: "Lora";
  src: url("./fonts/Lora-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Lora";
  src: url("./fonts/Lora-Italic.otf") format("opentype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ---------- Brand colors ----------
     Azuis estruturais — the three official primary blues.
     Use these as solid brand fills. Never substitute a tint. */
  --azul-profundo: #0A74B8;   /* primary */
  --azul-sereno:   #075C95;   /* deeper / heading accent */
  --azul-pulso:    #2FA6DF;   /* lighter / interactive accent */

  /* Tint scale built from the three primaries — use only for
     backgrounds, borders, gradients, hover/focus tints. */
  --iotherm-blue-50:  #E6F0F8;
  --iotherm-blue-100: #C2DAEC;
  --iotherm-blue-200: #8EBBDB;
  --iotherm-blue-300: #4D94C5;
  --iotherm-blue-400: #2FA6DF;  /* = azul-pulso */
  --iotherm-blue-500: #0A74B8;  /* = azul-profundo (PRIMARY) */
  --iotherm-blue-600: #075C95;  /* = azul-sereno */
  --iotherm-blue-700: #054775;
  --iotherm-blue-800: #03365B;
  --iotherm-blue-900: #022440;

  /* Cores de apoio — support colors. Soft pastels that
     accompany the blues. They must never compete with the
     azuis estruturais. */
  --lavanda-digital: #C8B6E2;
  --lilas-nevoa:     #E7D8F8;
  --bege-acolhedor:  #F5EAD6;

  /* Legacy lilac aliases — kept so existing components keep working.
     New work should reference the named support tokens above. */
  --iotherm-lilac-50:  var(--lilas-nevoa);
  --iotherm-lilac-100: var(--lilas-nevoa);
  --iotherm-lilac-200: var(--lavanda-digital);
  --iotherm-lilac-300: var(--lavanda-digital);
  --iotherm-lilac-400: var(--lavanda-digital);
  --iotherm-lilac-500: var(--lavanda-digital);  /* SECONDARY (de apoio) */
  --iotherm-lilac-600: #A593C6;

  /* Temperature gauge — used in app for temp bar / value */
  --temp-cool:   #2E8B57;
  --temp-normal: #6FB849;
  --temp-warm:   #E8B936;
  --temp-fever:  #E25C3B;
  --temp-high:   #C8302A;

  /* Neutrals */
  --ink-900: #0E1A2B;
  --ink-700: #2B3A50;
  --ink-500: #5A6878;
  --ink-400: #8B97A6;
  --ink-300: #B8C1CC;
  --ink-200: #DDE3EA;
  --ink-100: #ECF1F6;
  --ink-50:  #F6F8FB;
  --white:   #FFFFFF;

  /* Semantic */
  --bg:        var(--white);
  --bg-soft:   var(--ink-50);
  --bg-brand:  var(--iotherm-blue-500);
  --fg:        var(--ink-900);
  --fg-muted:  var(--ink-500);
  --fg-subtle: var(--ink-400);
  --fg-on-brand: var(--white);
  --brand:     var(--azul-profundo);
  --brand-hover: var(--azul-sereno);
  --brand-bright: var(--azul-pulso);
  --accent:    var(--lavanda-digital);
  --border:    var(--ink-200);
  --border-strong: var(--ink-300);
  --success:   #2E8B57;
  --warning:   #E8B936;
  --danger:    var(--temp-high);

  /* ---------- Type ---------- */
  --font-display: "Sora", "Noto Sans", system-ui, sans-serif;
  --font-body:    "Sora", "Noto Sans", system-ui, sans-serif;
  --font-serif:   "Lora", Georgia, serif;
  --font-mono:    ui-monospace, "SF Mono", Menlo, monospace;

  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  --fs-display: clamp(56px, 7vw, 96px);
  --fs-h1: clamp(40px, 4.5vw, 64px);
  --fs-h2: clamp(32px, 3.5vw, 48px);
  --fs-h3: clamp(24px, 2.5vw, 32px);
  --fs-h4: 22px;
  --fs-h5: 18px;
  --fs-body-lg: 18px;
  --fs-body: 16px;
  --fs-body-sm: 14px;
  --fs-caption: 12px;
  --fs-eyebrow: 13px;

  --lh-tight: 1.05;
  --lh-snug: 1.2;
  --lh-normal: 1.45;
  --lh-loose: 1.65;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.08em;
  --tracking-wider: 0.14em;

  /* ---------- Spacing scale (4-px grid) ---------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 40px;
  --sp-9: 48px;
  --sp-10: 64px;
  --sp-11: 80px;
  --sp-12: 120px;

  /* ---------- Radii ---------- */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-pill: 9999px;

  /* ---------- Shadows ---------- */
  --shadow-xs: 0 1px 2px rgba(11, 76, 124, 0.08);
  --shadow-sm: 0 2px 8px rgba(11, 76, 124, 0.10);
  --shadow-md: 0 8px 24px rgba(11, 76, 124, 0.12);
  --shadow-lg: 0 20px 48px rgba(11, 76, 124, 0.18);
  --shadow-glow: 0 0 0 4px rgba(20, 111, 174, 0.18);

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms;
  --dur-base: 220ms;
  --dur-slow: 360ms;

  --container: 1200px;
  --container-narrow: 880px;
}

/* ---------- Element classes ---------- */
.iotherm-prose {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--fg);
}
.iotherm-prose h1, .iot-h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-extrabold);
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
  margin: 0 0 var(--sp-5);
}
.iotherm-prose h2, .iot-h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
  margin: 0 0 var(--sp-4);
}
.iotherm-prose h3, .iot-h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  color: var(--fg);
  margin: 0 0 var(--sp-3);
}
.iot-display {
  font-family: var(--font-display);
  font-weight: var(--fw-extrabold);
  font-size: var(--fs-display);
  line-height: 0.98;
  letter-spacing: -0.025em;
}
.iot-eyebrow {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--brand);
}
.iot-pullquote {
  font-family: var(--font-serif);
  font-weight: 400;
  font-style: italic;
  font-size: 28px;
  line-height: 1.35;
  color: var(--ink-700);
}
.iotherm-prose p, .iot-body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--ink-700);
}
.iot-caption {
  font-size: var(--fs-caption);
  color: var(--fg-muted);
  letter-spacing: 0.02em;
}
.iot-temp {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  color: var(--temp-high);
  letter-spacing: -0.04em;
}