/* =========================================================
   IMUNARTIS NUTRITION — Foundation tokens
   Brand position: Premium Dark · Specialist · Sophisticated
   "A Arte da Vitalidade Inteligente"
   ========================================================= */

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

:root {
  /* ---------- INSTITUTIONAL PALETTE ---------- */
  /* From brandbook p.18 — used for ALL brand-level material */
  --imn-preto: #000000;            /* Preto Absoluto — primary canvas */
  --imn-grafite: #2e2e2e;          /* Cinza Grafite — secondary surface */
  --imn-salvia: #7b8f74;           /* Verde Sálvia — natural accent */
  --imn-platina: #eeeeee;          /* Platina — light surface */
  --imn-branco: #ffffff;           /* Pure white */

  /* Logo origin color (gold/bronze — de facto brand accent, not in palette doc) */
  --imn-ouro-logo: #b08a3a;
  --imn-ouro-logo-soft: #c9a560;

  /* ---------- PRODUCT PALETTE ---------- */
  /* From brandbook p.32 — each SKU paired with black gradient */
  --imn-imuno-p:        #0782bb;   /* Azul Vivo — IMUNO+P (shield) */
  --imn-omega-3:        #e8a623;   /* Amarelo Canário — Super Ômega 3 (fish) */
  --imn-propolis-verde: #006746;   /* Verde Esmeralda — Própolis Verde (hex) */
  --imn-propolis-ouro:  #e2cc6e;   /* Ouro — Própolis Amarelo (drop) */
  --imn-biolife:        #dfa194;   /* Rose Gold — BioLife Hair+ (DNA) */

  /* ---------- NEUTRAL SCALE (derived from grafite) ---------- */
  --imn-n-0:   #000000;
  --imn-n-50:  #0a0a0a;
  --imn-n-100: #141414;
  --imn-n-200: #1c1c1c;
  --imn-n-300: #2e2e2e;   /* = grafite */
  --imn-n-400: #3d3d3d;
  --imn-n-500: #5a5a5a;
  --imn-n-600: #7a7a7a;
  --imn-n-700: #a3a3a3;
  --imn-n-800: #c8c8c8;
  --imn-n-900: #eeeeee;   /* = platina */
  --imn-n-950: #f6f6f4;
  --imn-n-1000: #ffffff;

  /* ---------- SEMANTIC ROLES (dark mode default — Premium Dark) ---------- */
  --imn-bg:        var(--imn-preto);
  --imn-bg-elev:   var(--imn-n-100);
  --imn-bg-card:   var(--imn-n-200);
  --imn-bg-inset:  var(--imn-n-50);
  --imn-surface:   var(--imn-grafite);

  --imn-fg:        var(--imn-platina);   /* primary text on dark */
  --imn-fg-soft:   var(--imn-n-700);     /* secondary text */
  --imn-fg-muted:  var(--imn-n-600);     /* tertiary / labels */
  --imn-fg-faint:  var(--imn-n-500);     /* dividers / disabled */

  --imn-line:      rgba(238, 238, 238, 0.10);
  --imn-line-strong: rgba(238, 238, 238, 0.22);
  --imn-line-faint:  rgba(238, 238, 238, 0.05);

  --imn-accent:        var(--imn-ouro-logo);
  --imn-accent-soft:   var(--imn-ouro-logo-soft);
  --imn-accent-natural: var(--imn-salvia);

  /* ---------- TYPE ---------- */
  --imn-font-sans:    'Montserrat', system-ui, -apple-system, Helvetica, sans-serif;
  --imn-font-product: 'Exo 2', 'Montserrat', system-ui, sans-serif;
  --imn-font-mono:    ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Type scale (display + body) */
  --imn-text-3xs: 10px;
  --imn-text-2xs: 11px;
  --imn-text-xs:  12px;
  --imn-text-sm:  14px;
  --imn-text-md:  16px;
  --imn-text-lg:  18px;
  --imn-text-xl:  22px;
  --imn-text-2xl: 28px;
  --imn-text-3xl: 36px;
  --imn-text-4xl: 48px;
  --imn-text-5xl: 64px;
  --imn-text-6xl: 84px;
  --imn-text-7xl: 112px;

  --imn-track-tight:  -0.02em;
  --imn-track-normal: 0em;
  --imn-track-wide:   0.04em;
  --imn-track-wider:  0.12em;     /* eyebrows / category labels */
  --imn-track-widest: 0.32em;     /* section dividers */

  --imn-leading-tight: 1.05;
  --imn-leading-snug:  1.2;
  --imn-leading-body:  1.55;
  --imn-leading-loose: 1.75;

  /* ---------- SPACING / RADIUS / SHADOW ---------- */
  --imn-s-0: 0;
  --imn-s-1: 4px;
  --imn-s-2: 8px;
  --imn-s-3: 12px;
  --imn-s-4: 16px;
  --imn-s-5: 20px;
  --imn-s-6: 24px;
  --imn-s-8: 32px;
  --imn-s-10: 40px;
  --imn-s-12: 48px;
  --imn-s-16: 64px;
  --imn-s-20: 80px;
  --imn-s-24: 96px;
  --imn-s-32: 128px;

  /* Premium Dark uses minimal radii — never childish */
  --imn-r-0: 0;
  --imn-r-xs: 2px;
  --imn-r-sm: 4px;
  --imn-r-md: 6px;
  --imn-r-lg: 10px;
  --imn-r-pill: 999px;

  /* Shadows are SUBTLE — depth comes from color, not blur */
  --imn-shadow-1: 0 1px 0 rgba(255, 255, 255, 0.04) inset;
  --imn-shadow-2: 0 8px 24px rgba(0, 0, 0, 0.45);
  --imn-shadow-3: 0 24px 60px rgba(0, 0, 0, 0.55);
  --imn-glow-accent: 0 0 0 1px rgba(176, 138, 58, 0.35), 0 8px 32px rgba(176, 138, 58, 0.18);

  /* Ambient gradient — used as backgrounds for headers, cards, splash */
  --imn-bg-ambient: radial-gradient(120% 90% at 80% 10%, rgba(123, 143, 116, 0.18) 0%, transparent 55%),
                    radial-gradient(80% 60% at 12% 100%, rgba(176, 138, 58, 0.10) 0%, transparent 60%),
                    linear-gradient(180deg, #0a0a0a 0%, #000000 100%);

  /* ---------- MOTION ---------- */
  --imn-ease:      cubic-bezier(0.22, 0.61, 0.36, 1);   /* default — confident */
  --imn-ease-out:  cubic-bezier(0.16, 1, 0.3, 1);       /* entrances */
  --imn-ease-in:   cubic-bezier(0.55, 0, 0.78, 0.39);   /* exits */
  --imn-dur-1: 120ms;
  --imn-dur-2: 200ms;
  --imn-dur-3: 320ms;
  --imn-dur-4: 480ms;
}

/* =========================================================
   SEMANTIC TYPE CLASSES
   - Display (Montserrat Light/Thin) — feels editorial, clinical
   - Eyebrow (Medium, wide tracking, uppercase) — section markers
   - Body (Regular)
   ========================================================= */

.imn-display-1 {
  font-family: var(--imn-font-sans);
  font-weight: 200;
  font-size: clamp(48px, 8vw, var(--imn-text-7xl));
  line-height: var(--imn-leading-tight);
  letter-spacing: var(--imn-track-tight);
  color: var(--imn-fg);
}
.imn-display-2 {
  font-family: var(--imn-font-sans);
  font-weight: 200;
  font-size: clamp(36px, 5.5vw, var(--imn-text-6xl));
  line-height: 1.08;
  letter-spacing: var(--imn-track-tight);
  color: var(--imn-fg);
}
.imn-h1 {
  font-family: var(--imn-font-sans);
  font-weight: 300;
  font-size: var(--imn-text-4xl);
  line-height: var(--imn-leading-snug);
  letter-spacing: -0.01em;
  color: var(--imn-fg);
}
.imn-h2 {
  font-family: var(--imn-font-sans);
  font-weight: 400;
  font-size: var(--imn-text-3xl);
  line-height: 1.18;
  letter-spacing: -0.005em;
  color: var(--imn-fg);
}
.imn-h3 {
  font-family: var(--imn-font-sans);
  font-weight: 500;
  font-size: var(--imn-text-2xl);
  line-height: 1.22;
  color: var(--imn-fg);
}
.imn-h4 {
  font-family: var(--imn-font-sans);
  font-weight: 500;
  font-size: var(--imn-text-xl);
  line-height: 1.3;
  color: var(--imn-fg);
}

.imn-eyebrow {
  font-family: var(--imn-font-sans);
  font-weight: 500;
  font-size: var(--imn-text-xs);
  letter-spacing: var(--imn-track-wider);
  text-transform: uppercase;
  color: var(--imn-fg-soft);
}
.imn-eyebrow-strong {
  font-family: var(--imn-font-sans);
  font-weight: 600;
  font-size: var(--imn-text-2xs);
  letter-spacing: var(--imn-track-widest);
  text-transform: uppercase;
  color: var(--imn-accent);
}

.imn-body-lg {
  font-family: var(--imn-font-sans);
  font-weight: 400;
  font-size: var(--imn-text-lg);
  line-height: var(--imn-leading-body);
  color: var(--imn-fg-soft);
}
.imn-body {
  font-family: var(--imn-font-sans);
  font-weight: 400;
  font-size: var(--imn-text-md);
  line-height: var(--imn-leading-body);
  color: var(--imn-fg-soft);
}
.imn-body-sm {
  font-family: var(--imn-font-sans);
  font-weight: 400;
  font-size: var(--imn-text-sm);
  line-height: 1.5;
  color: var(--imn-fg-soft);
}
.imn-caption {
  font-family: var(--imn-font-sans);
  font-weight: 400;
  font-size: var(--imn-text-xs);
  line-height: 1.4;
  letter-spacing: 0.01em;
  color: var(--imn-fg-muted);
}

/* Product-label voice — Exo 2, used on packaging-like UI */
.imn-product-name {
  font-family: var(--imn-font-product);
  font-weight: 300;
  font-size: var(--imn-text-3xl);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--imn-fg);
}
.imn-product-tag {
  font-family: var(--imn-font-product);
  font-weight: 400;
  font-size: var(--imn-text-sm);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}