@import url("fonts.css");

:root {
  /* Elmex 2026 visual identity */
  --color-teal-deep: #004849;
  --color-teal: #008385;
  --color-teal-mid: #0c9787;
  --color-mint: #00e5ce;
  /* Accent de marca = mint/teal. Vermelho fica exclusivo para erro. */
  --color-accent: var(--color-mint);
  --color-accent-dark: var(--color-teal-deep);
  --color-white: #ffffff;
  --color-black: #002223;
  --color-gray-light: #c4dcda;
  --color-gray-dark: #1d3f40;

  --color-primary: var(--color-teal);
  --color-primary-hover: #00a8aa;
  --color-primary-dark: var(--color-teal-deep);
  --color-fire: var(--color-primary);
  --color-gold: var(--color-mint);
  --color-gold-soft: #7cf4e6;

  --color-surface: rgba(0, 72, 73, 0.82);
  --color-surface-strong: rgba(0, 42, 43, 0.9);
  /* Boxes/cards — teal em vez de cinza escuro */
  --color-card-bg: radial-gradient(ellipse 80% 120% at 50% -40%, rgba(0, 229, 206, 0.12) 0%, transparent 55%), linear-gradient(180deg, #004849 0%, #002223 100%);
  --color-border: rgba(255, 255, 255, 0.18);
  --color-text: #ffffff;
  --color-text-muted: rgba(255, 255, 255, 0.82);
  --color-text-soft: rgba(255, 255, 255, 0.62);
  --color-text-dark: #003437;
  --color-input-bg: #ffffff;
  --color-error: #d71414;
  --color-error-soft: #fe4b4b;
  --color-success: #1cb111;
  --color-success-soft: #5dd879;
  /* Botão desabilitado: cinza/verde escuro (vermelho só para erro) */
  --color-btn-disabled: #2a4546;
  --color-btn-disabled-text: rgba(255, 255, 255, 0.45);

  --font-heading: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-ui: var(--font-body);

  --radius-sm: 8px;
  --radius-btn: 999px;
  --radius-card: 16px;
  --radius-input: 12px;
  --radius-modal: 24px;
  --radius-pill: 999px;

  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 48px;
  --space-6: 64px;
  --space-7: 96px;

  --header-h: 72px;
  --wc-menu-h: 67px;
  --promo-encerrada-h: 0px;
  --countdown-h: 0px;
  --hero-stack-h: calc(var(--header-h) + var(--promo-encerrada-h, 0px) + var(--countdown-h, 0px));
  --elmex-bp-mobile: 991px;

  /* Backgrounds — index usa 01; demais páginas usam page (02/03/04 aliases) */
  --elmex-asset-bg-01: url("../assets/elmex/s-bkg/bkgHome_desktop.webp");
  --elmex-asset-bg-01-m: url("../assets/elmex/s-bkg/bkg1_mobile.webp");
  --elmex-asset-bg-page: url("../assets/elmex/s-bkg/bkg3_desktop.webp");
  --elmex-asset-bg-page-m: url("../assets/elmex/s-bkg/bkg2_mobile.webp");
  --elmex-asset-bg-02: var(--elmex-asset-bg-page);
  --elmex-asset-bg-02-m: var(--elmex-asset-bg-page-m);
  --elmex-asset-bg-03: var(--elmex-asset-bg-page);
  --elmex-asset-bg-03-m: var(--elmex-asset-bg-page-m);
  --elmex-asset-bg-04-p: var(--elmex-asset-bg-page);
  --elmex-asset-bg-04-p-m: var(--elmex-asset-bg-page-m);

  --hero-kv-mobile-h: calc(100vw * 1920 / 1080);
  --hero-mobile-content-offset: clamp(1.6rem, calc(var(--hero-kv-mobile-h) * 0.12), 4rem);
  --hero-mobile-content-offset-flow: clamp(1.2rem, calc(var(--hero-kv-mobile-h) * 0.1), 3.2rem);
  --hero-mobile-content-offset-logged: clamp(1.4rem, calc(var(--hero-kv-mobile-h) * 0.11), 3.6rem);

  --container: 1120px;
  --container-narrow: 720px;

  --shadow-lg: 0 24px 64px rgba(0, 20, 21, 0.5);
  --shadow-card: 0 12px 40px rgba(0, 20, 21, 0.4);
  --glow-mint: 0 0 32px rgba(0, 229, 206, 0.6);
  --glow-teal: 0 0 28px rgba(0, 131, 133, 0.45);
  --glow-accent: var(--glow-mint);
  --glow-red: var(--glow-mint);
  --glow-fire: var(--glow-teal);
  --glow-gold: var(--glow-mint);

  --gradient-page: linear-gradient(155deg, #009b8e 0%, #006c69 45%, #004849 100%);
  --gradient-brand: linear-gradient(135deg, #004849 0%, #008385 55%, #00e5ce 100%);
  --gradient-fire: var(--gradient-brand);
  --gradient-hero-overlay: linear-gradient(to left, rgba(0, 72, 73, 0.9) 0%, rgba(0, 72, 73, 0.32) 38%, transparent 58%);

  /* Fenix legado + aliases elmex_2025 */
  --c-orange1: var(--color-primary);
  --c-orange2: var(--color-primary);
  --c-orange3: var(--color-primary-dark);
  --c-teal1: #0db09e;
  --c-teal2: #006e6a;
  --c-teal3: var(--color-teal-mid);
  --c-teal4: var(--color-teal-deep);
  --c-teal7: #179188;
  --c-red1: var(--color-primary);
  --c-red2: var(--color-primary);
  --c-maroon1: var(--color-teal-deep);
  --c-maroon2: var(--color-teal-deep);
  --c-wine: var(--color-black);
  --c-blue1: #8eadc1;
  --c-darkBlue1: #1e1e1e;
  --c-darkBlue2: #101920;
  --c-darkBlue3: #121b22;
  --c-darkBlue4: #101a22;
  --c-darkBlue5: #16222b;
  --c-darkBlue6: #213744;
  --c-darkBlue7: #262c2d;
  --c-darkBlue8: #36454c;
  --c-white: #ffffff;
  --c-black: var(--color-black);
  --c-black2: #1f3a3b;
  --c-blackform: #6c757d;
  --c-gray: #f7f7f7;
  --c-gray2: #efeeed;
  --c-graydark: #666666;
  --c-check: var(--color-success);
  --c-error: var(--color-error);
  --c-error1: var(--color-error);
  --c-error2: var(--color-error-soft);
  --c-offwhite: #f4fffe;
  --c-yellow1: var(--color-mint);
}