/* =========================================================
   HIGIENI.X — Design Tokens v1.2 (cópia do design-system)
   Paleta derivada da logo: azul royal + ciano da gota + grafite do "X"
   Linguagem: estrutura de serviço (Ref. 1) + editorial premium (Ref. 2)
   ========================================================= */

@import url("https://fonts.googleapis.com/css2?family=Inter+Tight:wght@300;400;500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@500&display=swap");

:root {
  /* ---------- COR · Azul Higieni (primária — letras "HIGIENI") ---------- */
  --blue-50:  #EFF6FE;
  --blue-100: #DCEBFC;
  --blue-200: #B5D5F8;
  --blue-300: #7FB6F0;
  --blue-400: #3E8FE2;
  --blue-500: #0B6FCF;
  --blue-600: #0656A4;   /* ★ cor-assinatura (logo) — branco 7.3:1 */
  --blue-700: #004592;   /* ★ base da logo — branco 9.3:1 */
  --blue-800: #073670;
  --blue-900: #08254B;

  /* ---------- COR · Aqua (secundária — brilho da gota) ---------- */
  --aqua-50:  #EFFAFF;
  --aqua-100: #D9F3FE;
  --aqua-200: #B0E6FC;
  --aqua-300: #5FC4F5;   /* texto aqua sobre escuro (9.2:1) */
  --aqua-400: #22B0F3;
  --aqua-500: #01A1F1;   /* ★ ciano da gota — só acento/sobre escuro */
  --aqua-600: #0188E3;   /* ★ ciano médio da gota */
  --aqua-700: #0270B8;

  /* ---------- COR · Grafite (o "X" da logo) ---------- */
  --graphite-300: #B4B6B9;
  --graphite-400: #9A9C9F;
  --graphite-500: #85878A; /* ★ cinza do "X" — decorativo/ícones grandes */
  --graphite-600: #5C6470; /* versão acessível para texto (6:1) */

  /* ---------- COR · Profundos (navy-tinta, substitui o petróleo da Ref. 2) ---------- */
  --ink-600: #1C2B42;
  --ink-700: #14223A;
  --ink-800: #0F1B2E;
  --ink-900: #0A1628;    /* texto principal / seções escuras (18:1) */

  /* ---------- COR · Neutros frios ---------- */
  --white:       #FFFFFF;
  --neutral-25:  #FBFCFD;  /* fundo da página */
  --neutral-50:  #F6F8FA;
  --neutral-100: #EFF2F5;  /* superfície de cards */
  --neutral-200: #E2E7EC;  /* bordas */
  --neutral-300: #CBD2DA;
  --neutral-400: #A2ACB8;  /* palavras "apagadas" em títulos */
  --neutral-500: #7B8794;
  --neutral-600: #5C6470;  /* texto secundário */
  --neutral-800: #2A3340;
  --neutral-900: #1A212B;

  /* ---------- COR · Brilhos (glow da Ref. 2, agora em gelo/aqua) ---------- */
  --glow-aqua: #D6F2FF;
  --glow-ice:  #E8F1FF;

  /* ---------- COR · Feedback ---------- */
  --success: #16865A;
  --warning: #C98A12;
  --danger:  #C8412F;
  --info:    var(--blue-500);
  --star:    #F2B630;

  /* ---------- COR · Semântica ---------- */
  --bg:              var(--neutral-25);
  --bg-inverse:      var(--ink-900);
  --surface:         var(--white);
  --surface-muted:   var(--neutral-100);
  --surface-dark:    var(--ink-700);
  --border:          var(--neutral-200);
  --border-dark:     rgba(255,255,255,.10);

  --text:            var(--ink-900);
  --text-secondary:  var(--neutral-600);
  --text-muted:      var(--neutral-400);
  --text-inverse:    var(--white);
  --text-inverse-2:  rgba(255,255,255,.70);
  --text-accent:     var(--blue-600);
  --text-accent-on-dark: var(--aqua-300);

  --action:          var(--blue-600);
  --action-hover:    var(--blue-500);
  --action-press:    var(--blue-700);
  --on-action:       var(--white);
  --action-on-dark:  var(--aqua-500);   /* botão primário em seções escuras */
  --on-action-dark:  var(--ink-900);

  --focus-ring: 0 0 0 4px rgba(1,161,241,.28);

  /* ---------- GRADIENTES ---------- */
  --grad-drop:       linear-gradient(135deg, var(--aqua-500) 0%, var(--blue-600) 55%, var(--blue-700) 100%); /* gradiente da gota */
  --grad-signature:  linear-gradient(180deg, var(--blue-600) 0%, var(--blue-800) 55%, var(--ink-900) 100%);
  --grad-hero-overlay: linear-gradient(180deg, rgba(10,22,40,.20) 0%, rgba(10,22,40,.40) 45%, rgba(10,22,40,.88) 100%);
  --grad-glow:       radial-gradient(120% 120% at 100% 100%, var(--glow-aqua) 0%, rgba(214,242,255,0) 60%);
  --grad-glow-ice:   radial-gradient(120% 120% at 0% 100%, var(--glow-ice) 0%, rgba(232,241,255,0) 60%);
  --grad-text:       linear-gradient(90deg, var(--aqua-500), var(--blue-600));

  /* ---------- TIPOGRAFIA ---------- */
  --font-display: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, monospace;

  --fs-display-xl: clamp(3rem, 1.6rem + 6.2vw, 7.5rem);      /* 48 → 120 */
  --fs-display-l:  clamp(2.5rem, 1.6rem + 4vw, 5.5rem);      /* 40 → 88 */
  --fs-h1:         clamp(2.25rem, 1.6rem + 2.8vw, 4rem);     /* 36 → 64 */
  --fs-h2:         clamp(1.875rem, 1.4rem + 2vw, 3rem);      /* 30 → 48 */
  --fs-h3:         clamp(1.375rem, 1.2rem + .8vw, 1.875rem); /* 22 → 30 */
  --fs-h4:         1.25rem;
  --fs-body-l:     1.125rem;
  --fs-body:       1rem;
  --fs-body-s:     .875rem;
  --fs-caption:    .75rem;
  --fs-eyebrow:    .75rem;

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

  --lh-display: .95; --lh-heading: 1.1; --lh-body: 1.6;
  --ls-display: -0.045em; --ls-heading: -0.03em; --ls-body: -0.005em; --ls-eyebrow: .14em;

  /* ---------- ESPAÇAMENTO (base 4px) ---------- */
  --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; --space-40: 160px;

  --section-y: clamp(80px, 6rem + 5vw, 176px);
  --gutter: clamp(16px, 4vw, 40px);
  --container: 1320px;
  --container-narrow: 880px;

  /* ---------- RAIO ---------- */
  --radius-xs: 6px; --radius-sm: 10px; --radius-md: 16px;
  --radius-lg: 24px; --radius-xl: 32px; --radius-2xl: 40px; --radius-pill: 999px;

  /* ---------- SOMBRAS (tom navy) ---------- */
  --shadow-xs: 0 1px 2px rgba(10,22,40,.05);
  --shadow-sm: 0 2px 8px rgba(10,22,40,.06);
  --shadow-md: 0 12px 32px -8px rgba(10,22,40,.12);
  --shadow-lg: 0 32px 64px -16px rgba(10,22,40,.20);
  --shadow-device: 0 40px 80px -20px rgba(10,22,40,.45);
  --shadow-glow: 0 10px 30px -6px rgba(6,86,164,.45);
  --shadow-glow-aqua: 0 10px 30px -6px rgba(1,161,241,.45);

  /* ---------- MOVIMENTO ---------- */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --dur-fast: 160ms; --dur-base: 280ms; --dur-slow: 600ms; --dur-reveal: 900ms;

  /* ---------- CAMADAS ---------- */
  --z-base: 1; --z-sticky: 100; --z-nav: 200; --z-overlay: 900; --z-modal: 1000;

  /* ---------- VIDRO ---------- */
  --glass-bg: rgba(10,22,40,.45);
  --glass-bg-light: rgba(255,255,255,.75);
  --glass-border: rgba(255,255,255,.16);
  --glass-blur: blur(16px) saturate(140%);
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; --dur-reveal: 0ms; }
}