/* =============================================================
   Jubilato Seguros — Design System
   Cores e Tipografia (base + semântica)
   ============================================================= */

/* ---------- Fontes ---------- */
@font-face {
  font-family: "Coolvetica";
  src: url("./fonts/Coolvetica%20Rg.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Coolvetica";
  src: url("./fonts/Coolvetica%20Rg%20It.otf") format("opentype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Coolvetica";
  src: url("./fonts/Coolvetica%20Rg%20Cond.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-stretch: condensed;
  font-display: swap;
}
@font-face {
  font-family: "Coolvetica Heavy";
  src: url("./fonts/Coolvetica%20Hv%20Comp.otf") format("opentype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Rustica";
  src: url("./fonts/Rustica-Thin.otf") format("opentype");
  font-weight: 100; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Rustica";
  src: url("./fonts/Rustica-ExtraLight.otf") format("opentype");
  font-weight: 200; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Rustica";
  src: url("./fonts/Rustica-Light.otf") format("opentype");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Rustica";
  src: url("./fonts/Rustica-SemiLight.otf") format("opentype");
  font-weight: 350; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Rustica";
  src: url("./fonts/Rustica-Regular.otf") format("opentype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Rustica";
  src: url("./fonts/Rustica-Medium.otf") format("opentype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Rustica";
  src: url("./fonts/Rustica-Bold.otf") format("opentype");
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  /* ===========================================================
     CORES — BASE
     =========================================================== */

  /* Marca (proporção 60/30/10) */
  --brand-navy:        #0A1952;   /* 60% — cor dominante */
  --brand-blue:        #1D4ED8;   /* 30% — apoio/destaque */
  --brand-green:       #5ED08E;   /* 10% — CTA/ação */

  /* Neutras */
  --neutral-dark:      #121228;   /* fundos escuros, hero */
  --neutral-light:     #F9F9F9;   /* fundos claros */
  --white:             #FFFFFF;

  /* Marca NJR (sub-marca, transporte) */
  --njr-orange:        #F26522;

  /* Escala derivada de navy (overlays + camadas) */
  --navy-100: rgba(10, 25, 82, 0.04);
  --navy-200: rgba(10, 25, 82, 0.08);
  --navy-300: rgba(10, 25, 82, 0.12);
  --navy-400: rgba(10, 25, 82, 0.20);
  --navy-500: rgba(10, 25, 82, 0.40);
  --navy-600: rgba(10, 25, 82, 0.60);
  --navy-700: rgba(10, 25, 82, 0.85);

  --white-100: rgba(255, 255, 255, 0.06);
  --white-200: rgba(255, 255, 255, 0.10);
  --white-300: rgba(255, 255, 255, 0.20);
  --white-500: rgba(255, 255, 255, 0.40);
  --white-700: rgba(255, 255, 255, 0.75);
  --white-800: rgba(255, 255, 255, 0.85);

  /* Estados semânticos */
  --success:           #5ED08E;
  --success-bg:        rgba(94, 208, 142, 0.15);
  --success-border:    rgba(94, 208, 142, 0.40);
  --success-text:      #2D8A5E;

  --warning:           #F26522;
  --warning-bg:        rgba(242, 101, 34, 0.12);
  --warning-border:    rgba(242, 101, 34, 0.40);
  --warning-text:      #C04D0E;

  --info:              #1D4ED8;
  --info-bg:           rgba(29, 78, 216, 0.10);
  --info-border:       rgba(29, 78, 216, 0.40);
  --info-text:         #1D4ED8;

  --danger:            #EF4444;
  --danger-bg:         rgba(239, 68, 68, 0.10);

  /* ===========================================================
     CORES — SEMÂNTICA (foreground / background)
     =========================================================== */

  /* Fundos */
  --bg-page:           var(--neutral-light);
  --bg-surface:        var(--white);
  --bg-muted:          #F1F2F6;
  --bg-inverse:        var(--brand-navy);
  --bg-deepest:        var(--neutral-dark);

  /* Texto */
  --fg-primary:        var(--brand-navy);
  --fg-secondary:      rgba(10, 25, 82, 0.70);
  --fg-tertiary:       rgba(10, 25, 82, 0.50);
  --fg-muted:          rgba(10, 25, 82, 0.40);
  --fg-on-dark:        var(--white);
  --fg-on-dark-soft:   rgba(255, 255, 255, 0.75);
  --fg-on-dark-muted:  rgba(255, 255, 255, 0.55);
  --fg-link:           var(--brand-blue);
  --fg-accent:         var(--brand-green);

  /* Borders */
  --border-subtle:     rgba(10, 25, 82, 0.10);
  --border-default:    rgba(10, 25, 82, 0.15);
  --border-strong:     rgba(10, 25, 82, 0.25);
  --border-on-dark:    rgba(255, 255, 255, 0.20);
  --focus-ring:        0 0 0 3px rgba(29, 78, 216, 0.35);

  /* Gradiente permitido (somente escuro→escuro ou navy→blue) */
  --gradient-deep:     linear-gradient(180deg, #0A1952 0%, #121228 100%);
  --gradient-blueshift: linear-gradient(135deg, #0A1952 0%, #1D4ED8 100%);

  /* ===========================================================
     TIPOGRAFIA — FAMÍLIAS
     =========================================================== */
  --font-display:      "Coolvetica", "Coolvetica Heavy", "Helvetica Neue", Arial, sans-serif;
  --font-body:         "Rustica", "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-mono:         "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* Pesos */
  --fw-thin:           100;
  --fw-extralight:     200;
  --fw-light:          300;
  --fw-regular:        400;
  --fw-medium:         500;
  --fw-bold:           700;

  /* ===========================================================
     ESCALA TIPOGRÁFICA
     =========================================================== */
  --text-hero-size:    72px;
  --text-hero-lh:      1.02;
  --text-hero-tracking:-0.02em;

  --text-h1-size:      48px;
  --text-h1-lh:        1.05;
  --text-h1-tracking:  -0.02em;

  --text-h2-size:      32px;
  --text-h2-lh:        1.15;
  --text-h2-tracking:  -0.015em;

  --text-h3-size:      24px;
  --text-h3-lh:        1.25;
  --text-h3-tracking:  -0.01em;

  --text-body-lg-size: 18px;
  --text-body-lg-lh:   1.6;

  --text-body-size:    16px;
  --text-body-lh:      1.6;

  --text-body-sm-size: 14px;
  --text-body-sm-lh:   1.55;

  --text-label-size:   12px;
  --text-label-lh:     1.4;
  --text-label-tracking: 0.02em;

  --text-cta-size:     16px;
  --text-cta-lh:       1.2;

  /* ===========================================================
     ESPAÇAMENTO (base 8px)
     =========================================================== */
  --space-1:  8px;
  --space-2:  16px;
  --space-3:  24px;
  --space-4:  32px;
  --space-5:  40px;
  --space-6:  48px;
  --space-8:  64px;
  --space-10: 80px;
  --space-12: 96px;
  --space-16: 128px;

  /* ===========================================================
     RAIO + ELEVAÇÃO
     =========================================================== */
  --radius-sm: 4px;
  --radius-md: 6px;   /* botões, inputs */
  --radius-lg: 12px;  /* cards */
  --radius-xl: 20px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(10, 25, 82, 0.06);
  --shadow-md: 0 2px 16px rgba(10, 25, 82, 0.08);
  --shadow-lg: 0 8px 32px rgba(10, 25, 82, 0.14);
  --shadow-cta: 0 4px 12px rgba(94, 208, 142, 0.30);

  /* ===========================================================
     LAYOUT
     =========================================================== */
  --container-max: 1280px;
  --container-pad-mobile: 24px;
  --container-pad-tablet: 48px;
  --container-pad-desktop: 80px;

  /* ===========================================================
     MOVIMENTO
     =========================================================== */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 150ms;
  --duration-base: 200ms;
  --duration-slow: 300ms;
}

/* =============================================================
   SEMÂNTICA: tags de uso direto
   Use em conjunto com `class="js-typo"` ou aplique no elemento.
   ============================================================= */

.js-typo,
.js-typo h1, .js-typo h2, .js-typo h3, .js-typo h4,
.js-typo p, .js-typo li, .js-typo a, .js-typo button, .js-typo input,
.js-typo blockquote, .js-typo code, .js-typo small {
  font-family: var(--font-body);
  color: var(--fg-primary);
}

.js-hero, .js-h1, .js-h2, .js-h3, .js-display {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  color: var(--fg-primary);
  text-wrap: balance;
}

.js-hero {
  font-size: var(--text-hero-size);
  line-height: var(--text-hero-lh);
  letter-spacing: var(--text-hero-tracking);
}
.js-h1 {
  font-size: var(--text-h1-size);
  line-height: var(--text-h1-lh);
  letter-spacing: var(--text-h1-tracking);
}
.js-h2 {
  font-size: var(--text-h2-size);
  line-height: var(--text-h2-lh);
  letter-spacing: var(--text-h2-tracking);
}
.js-h3 {
  font-size: var(--text-h3-size);
  line-height: var(--text-h3-lh);
  letter-spacing: var(--text-h3-tracking);
}

.js-body-lg { font-family: var(--font-body); font-size: var(--text-body-lg-size); line-height: var(--text-body-lg-lh); color: var(--fg-secondary); }
.js-body    { font-family: var(--font-body); font-size: var(--text-body-size);    line-height: var(--text-body-lh);    color: var(--fg-primary); }
.js-body-sm { font-family: var(--font-body); font-size: var(--text-body-sm-size); line-height: var(--text-body-sm-lh); color: var(--fg-secondary); }
.js-label {
  font-family: var(--font-body);
  font-size: var(--text-label-size);
  line-height: var(--text-label-lh);
  letter-spacing: var(--text-label-tracking);
  font-weight: var(--fw-medium);
  color: var(--fg-secondary);
  text-transform: uppercase;
}
.js-cta {
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: var(--text-cta-size);
  line-height: var(--text-cta-lh);
}
.js-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

.js-link { color: var(--fg-link); text-decoration: none; border-bottom: 1px solid currentColor; }
.js-link:hover { color: var(--brand-navy); }