/* ============================================================
   OCEANIA ENGENHARIA — Foundations
   Cores e tipografia oficiais (Mini Brand Book, 11/05/2026)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* ---------- BRAND COLORS ---------- */
  --oc-azul-oceano:       #063048;   /* PRIMÁRIA · Institucional */
  --oc-vermelho-eng:      #C22026;   /* DESTAQUE · CTAs, conversão */
  --oc-vermelho-profundo: #761012;   /* APOIO · Profundidade, gradientes */
  --oc-grafite:           #1A1D20;   /* TEXTO · Corpo */
  --oc-branco:            #FFFFFF;   /* RESPIRO · Fundo */

  /* Azul Oceano scale — derived institutional tints/shades */
  --oc-azul-950: #03192a;
  --oc-azul-900: #052338;
  --oc-azul-800: #063048; /* base */
  --oc-azul-700: #0b4669;
  --oc-azul-600: #115d8a;
  --oc-azul-500: #1a78ad;
  --oc-azul-300: #6ba6cf;
  --oc-azul-100: #c8def0;
  --oc-azul-050: #eaf2fa;

  /* Vermelho scale */
  --oc-vermelho-900: #4d0b0c;
  --oc-vermelho-800: #761012;
  --oc-vermelho-700: #9a161b;
  --oc-vermelho-600: #C22026; /* base */
  --oc-vermelho-500: #d63a40;
  --oc-vermelho-300: #ec8689;
  --oc-vermelho-100: #f8d4d6;

  /* Neutrals — grafite cold-gray ladder */
  --oc-grafite-950: #0b0d10;
  --oc-grafite-900: #1A1D20; /* corpo */
  --oc-grafite-800: #2a2e33;
  --oc-grafite-700: #3d4248;
  --oc-grafite-600: #565c63;
  --oc-grafite-500: #6f757d;
  --oc-grafite-400: #8d939a;
  --oc-grafite-300: #b0b5bb;
  --oc-grafite-200: #d2d6da;
  --oc-grafite-100: #e6e9ec;
  --oc-grafite-050: #f3f5f7;

  /* ---------- SEMANTIC TOKENS ---------- */
  --fg-1: var(--oc-grafite-900);     /* corpo principal */
  --fg-2: var(--oc-grafite-700);     /* secundário */
  --fg-3: var(--oc-grafite-500);     /* terciário, legendas */

  /* Text tokens — dark mode (padrão) */
  --text-title: #FFFFFF;             /* títulos fortes */
  --text-muted: #8A99A8;             /* labels, caps, textos secundários */
  --text-body:  #B0C0D0;             /* parágrafos de leitura */
  --fg-on-azul: var(--oc-branco);
  --fg-on-vermelho: var(--oc-branco);
  --fg-institutional: var(--oc-azul-oceano); /* títulos institucionais */

  --bg-1: var(--oc-branco);          /* respiro principal */
  --bg-2: var(--oc-grafite-050);     /* fundo suave */
  --bg-3: var(--oc-grafite-100);     /* fundo de bloco */
  --bg-azul: var(--oc-azul-oceano);
  --bg-azul-deep: var(--oc-azul-950);
  --bg-grafite: var(--oc-grafite-900);

  --accent: var(--oc-vermelho-eng);
  --accent-deep: var(--oc-vermelho-profundo);
  --accent-hover: #a8181d;          /* manual dark of vermelho-eng */
  --accent-press: #8d1216;

  --border-1: var(--oc-grafite-200);
  --border-2: var(--oc-grafite-300);
  --border-strong: var(--oc-grafite-900);
  --divider-red: var(--oc-vermelho-eng); /* linhas divisórias de destaque */

  /* Status (derivado da paleta — sem cores extras) */
  --status-success: #1f7a4d;
  --status-warning: #b88012;
  --status-danger:  var(--oc-vermelho-eng);
  --status-info:    var(--oc-azul-500);

  /* ---------- GRADIENTS ---------- */
  --grad-vermelho: linear-gradient(135deg, var(--oc-vermelho-eng) 0%, var(--oc-vermelho-profundo) 100%);
  --grad-azul-deep: linear-gradient(180deg, var(--oc-azul-800) 0%, var(--oc-azul-950) 100%);
  --grad-protection-bottom: linear-gradient(180deg, rgba(6,48,72,0) 0%, rgba(6,48,72,0.85) 100%);

  /* ---------- TYPOGRAPHY ---------- */
  --font-display: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Inter', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'Menlo', monospace;

  /* Weights */
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;
  --fw-xbold:   800;

  /* Type scale (px) — institutional 1.250 ratio, anchored on the brand book */
  --fs-display:   56px;   /* hero institucional */
  --fs-h1:        40px;   /* book uses 32pt; web hero scale */
  --fs-h2:        28px;
  --fs-h3:        20px;
  --fs-h4:        16px;
  --fs-eyebrow:   12px;
  --fs-body:      16px;
  --fs-small:     14px;
  --fs-micro:     12px;

  /* Line heights */
  --lh-tight:   1.1;
  --lh-snug:    1.25;
  --lh-normal:  1.5;   /* corpo conforme brand book */
  --lh-loose:   1.7;

  /* Letter spacing */
  --ls-display: -0.01em;
  --ls-body:    0;
  --ls-eyebrow: 0.16em;
  --ls-button:  0.08em;

  /* ---------- SPACING (4px base) ---------- */
  --space-0: 0;
  --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 ---------- */
  --radius-0:  0px;       /* arquitetônico — preferido para blocos institucionais */
  --radius-1:  2px;       /* divisores, etiquetas */
  --radius-2:  4px;       /* inputs */
  --radius-3:  6px;       /* botões, cards */
  --radius-4:  10px;
  --radius-pill: 999px;

  /* ---------- ELEVATION ---------- */
  --shadow-0:  none;
  --shadow-1:  0 1px 2px rgba(6,48,72,0.06), 0 1px 1px rgba(6,48,72,0.04);
  --shadow-2:  0 2px 8px rgba(6,48,72,0.08), 0 1px 2px rgba(6,48,72,0.05);
  --shadow-3:  0 8px 24px rgba(6,48,72,0.10), 0 2px 6px rgba(6,48,72,0.06);
  --shadow-4:  0 18px 48px rgba(6,48,72,0.16), 0 4px 12px rgba(6,48,72,0.08);
  --shadow-inset: inset 0 0 0 1px rgba(6,48,72,0.08);

  /* ---------- MOTION ---------- */
  --ease-out:    cubic-bezier(.2, .7, .2, 1);
  --ease-in-out: cubic-bezier(.4, 0, .2, 1);
  --dur-fast:    140ms;
  --dur-base:    220ms;
  --dur-slow:    420ms;

  /* ---------- LAYOUT ---------- */
  --container-max: 1280px;
  --container-pad: clamp(20px, 4vw, 56px);
}

/* ============================================================
   SEMANTIC ELEMENTS — use directly without classes
   ============================================================ */

html, body {
  background: var(--bg-1);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.oc-eyebrow,
[data-oc="eyebrow"] {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--oc-vermelho-eng);
}

h1, .oc-h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-xbold);
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  color: var(--fg-institutional);
  margin: 0;
}

.oc-display {
  font-family: var(--font-display);
  font-weight: var(--fw-xbold);
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  color: var(--fg-institutional);
}

h2, .oc-h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  color: var(--fg-institutional);
  margin: 0;
}

h3, .oc-h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  color: var(--fg-1);
  margin: 0;
}

h4, .oc-h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-semi);
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--fg-1);
  margin: 0;
}

p, .oc-body {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--fg-1);
  margin: 0;
  text-wrap: pretty;
}

small, .oc-small {
  font-size: var(--fs-small);
  line-height: var(--lh-normal);
  color: var(--fg-2);
}

.oc-micro {
  font-size: var(--fs-micro);
  line-height: 1.4;
  color: var(--fg-3);
}

code, .oc-mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

a, .oc-link {
  color: var(--oc-azul-oceano);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--oc-vermelho-eng); }

hr.oc-divider {
  border: 0;
  height: 2px;
  background: var(--divider-red);
  width: 64px;
  margin: var(--space-4) 0;
}