/* Lirius — página institucional. CSS único: tokens do design system + regras da página. */

/* ===== tokens/fonts.css ===== */
/* Lirius — família única: Inter. Fonte servida pelo Google Fonts (o .fig não embarca binários). */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');
:root{--font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif}

/* ===== tokens/primitives.css ===== */
/* Primitivos — coleção "Primitivos" (41 vars). NÃO usar direto na tela: alimentam os semânticos. */
:root{
--neutral-white:rgb(255,255,255);
--neutral-warm-white:rgb(248,247,244);
--neutral-mist:rgb(236,236,233);
--neutral-mineral:rgb(202,202,197);
--neutral-stone:rgb(94,94,88);
--neutral-graphite:rgb(37,37,37);
--neutral-black:rgb(0,0,0);
--ink-100:rgb(232,237,244);
--ink-500:rgb(62,107,168);
--ink-600:rgb(46,84,136);
--ink-700:rgb(34,64,107);
--ink-800:rgb(23,46,78);
--orange-100:rgb(251,233,220);
--orange-500:rgb(237,122,43);
--orange-600:rgb(217,100,22);
--orange-700:rgb(184,78,12);
--teal-100:rgb(227,242,241);
--teal-500:rgb(0,165,163);
--teal-600:rgb(0,128,127);
--teal-700:rgb(0,107,105);
--alert-100:rgb(252,234,234);
--alert-600:rgb(198,40,40);
--alert-700:rgb(168,30,30);
--success-100:rgb(230,242,236);
--success-600:rgb(46,125,91);
--warning-100:rgb(253,241,223);
--warning-700:rgb(138,90,0);
--accents-yellow:rgb(255,204,0);
}

/* ===== tokens/semantics.css ===== */
/* Semânticos — os ÚNICOS que devem ser usados na tela.
   Ação é institucional (ink) e não muda por produto.
   Cor de produto troca por modo: [data-mode="nac"] / [data-mode="magnesio"]. */
:root{
--surface-page:var(--neutral-warm-white);
--surface-card:var(--neutral-white);
--surface-muted:var(--neutral-mist);
--surface-hover:var(--neutral-mist);
--surface-inverse:var(--neutral-graphite);
--text-primary:var(--neutral-graphite);
--text-secondary:var(--neutral-stone);
--text-inverse:var(--neutral-white);
--border-subtle:var(--neutral-mineral);
--action-primary:var(--ink-600);
--action-hover:var(--ink-700);
--action-pressed:var(--ink-800);
--action-subtle:var(--ink-500);
--action-soft:var(--ink-100);
--action-on-primary:var(--neutral-white);
--focus-ring:var(--ink-500);
--feedback-alert:var(--alert-600);
--feedback-alert-soft:var(--alert-100);
--feedback-alert-strong:var(--alert-700);
--feedback-success:var(--success-600);
--feedback-success-soft:var(--success-100);
--feedback-warning:var(--warning-700);
--feedback-warning-soft:var(--warning-100);
--state-disabled-surface:var(--neutral-mist);
--state-disabled-border:var(--neutral-mineral);
--state-disabled-text:var(--neutral-mineral);
/* modo Institucional (default): a cor de produto é neutra */
--accent-product:var(--neutral-graphite);
--accent-product-strong:var(--neutral-black);
--accent-product-deep:var(--neutral-graphite);
--accent-product-soft:var(--neutral-mist);
}
[data-mode="nac"]{
--accent-product:var(--orange-500);
--accent-product-strong:var(--orange-600);
--accent-product-deep:var(--orange-700);
--accent-product-soft:var(--orange-100);
}
[data-mode="magnesio"]{
--accent-product:var(--teal-500);
--accent-product-strong:var(--teal-600);
--accent-product-deep:var(--teal-700);
--accent-product-soft:var(--teal-100);
}

/* ===== tokens/typography.css ===== */
/* Tipografia — Inter, família única, escala desktop.
   Piso de 16px em qualquer texto (o technical subiu de 14 para 16 em relação à LP). */
:root{
--type-display-size:56px;   --type-display-line:62px;  --type-display-weight:600; --type-display-tracking:-1.5%;
--type-h2-size:36px;        --type-h2-line:44px;       --type-h2-weight:600;      --type-h2-tracking:-1%;
--type-h3-size:24px;        --type-h3-line:30px;       --type-h3-weight:600;      --type-h3-tracking:0;
--type-body-lg-size:20px;   --type-body-lg-line:32px;  --type-body-lg-weight:400; --type-body-lg-tracking:0;
--type-body-size:18px;      --type-body-line:29px;     --type-body-weight:400;    --type-body-tracking:0;
--type-body-sm-size:16px;   --type-body-sm-line:24px;  --type-body-sm-weight:400; --type-body-sm-tracking:0;
--type-technical-size:16px; --type-technical-line:20px;--type-technical-weight:500;--type-technical-tracking:8%;
--type-button-size:18px;    --type-button-line:24px;   --type-button-weight:600;  --type-button-tracking:1%;
}
.lr-display{font:var(--type-display-weight) var(--type-display-size)/var(--type-display-line) var(--font-sans);letter-spacing:-0.84px;color:var(--text-primary);margin:0}
.lr-h2{font:var(--type-h2-weight) var(--type-h2-size)/var(--type-h2-line) var(--font-sans);letter-spacing:-0.36px;color:var(--text-primary);margin:0}
.lr-h3{font:var(--type-h3-weight) var(--type-h3-size)/var(--type-h3-line) var(--font-sans);color:var(--text-primary);margin:0}
.lr-body-lg{font:var(--type-body-lg-weight) var(--type-body-lg-size)/var(--type-body-lg-line) var(--font-sans);color:var(--text-primary);margin:0}
.lr-body{font:var(--type-body-weight) var(--type-body-size)/var(--type-body-line) var(--font-sans);color:var(--text-primary);margin:0}
.lr-body-sm{font:var(--type-body-sm-weight) var(--type-body-sm-size)/var(--type-body-sm-line) var(--font-sans);color:var(--text-primary);margin:0}
.lr-technical{font:var(--type-technical-weight) var(--type-technical-size)/var(--type-technical-line) var(--font-sans);letter-spacing:1.28px;text-transform:uppercase;color:var(--text-secondary);margin:0}
.lr-button-type{font:var(--type-button-weight) var(--type-button-size)/var(--type-button-line) var(--font-sans);letter-spacing:0.18px}

/* ===== tokens/spacing.css ===== */
/* Espaçamento e raio. Se existe token, usa o token — nenhum valor solto na tela. */
:root{
--space-xs:8px;--space-sm:12px;--space-md:16px;--space-lg:24px;--space-xl:40px;--space-2xl:64px;--space-3xl:96px;--space-4xl:128px;
--radius-button:16px;--radius-card:20px;--radius-full:999px;
}

/* ===== tokens/layout.css ===== */
/* Grid desktop — viewport 1440 · margem 120 · container 1200 · 12 col de 78 · gutter 24.
   Vãos: 3col 282 · 4col 384 · 5col 486 · 6col 588 · 7col 690.
   Grades usadas: 2 cards de 588 · 3 de 384 · 4 de 282 · 5 itens de 220. PDP: galeria 690 + buy box 486.
   Padding vertical de seção: 96 (space/3xl). Exceção: seção com carrossel usa padding lateral 0
   e move os 120 para dentro do Head e do carrossel. */
:root{
--layout-viewport:1440px;--layout-margin:120px;--layout-container:1200px;--layout-gutter:24px;--layout-column:78px;
--span-3col:282px;--span-4col:384px;--span-5col:486px;--span-6col:588px;--span-7col:690px;
--section-padding-y:var(--space-3xl);
}

/* ===== tokens/base.css ===== */
:root{color-scheme:light}
body{margin:0;background:var(--surface-page);color:var(--text-primary);font-family:var(--font-sans);-webkit-font-smoothing:antialiased}
a{color:var(--action-primary);text-decoration:none}
a:hover{color:var(--action-hover);text-decoration:underline}
*{text-wrap:pretty}

/* ===== Página ===== */
body{margin:0;background:var(--surface-page)}
:root{--link-text:var(--action-primary);--link-text-hover:var(--action-hover)}
a{color:var(--link-text);text-decoration:none}
a:hover{color:var(--link-text-hover)}
input::placeholder{color:var(--text-secondary);opacity:1}

/* Fundo de marca — mesma imagem nos dois modos; no escuro, escurecida por um véu. */
.lr-page{
  background:var(--page-veil,none),url('assets/fundo-lirius.webp') center/cover no-repeat fixed,var(--surface-page);
}

/* Modo escuro — segue a preferência do navegador; remapeia só os semânticos. */
@media (prefers-color-scheme: dark){
:root{
--page-veil:linear-gradient(rgba(0,0,0,0.90),rgba(0,0,0,0.90));
--surface-page:var(--neutral-black);
--surface-card:var(--neutral-graphite);
--surface-muted:var(--neutral-graphite);
--surface-hover:var(--neutral-graphite);
--surface-inverse:var(--neutral-warm-white);
--text-primary:var(--neutral-white);
--text-secondary:var(--neutral-mineral);
--text-inverse:var(--neutral-graphite);
--border-subtle:var(--neutral-stone);
--action-primary:var(--ink-500);
--action-hover:var(--ink-600);
--action-pressed:var(--ink-700);
--action-soft:var(--ink-800);
--focus-ring:var(--ink-500);
--state-disabled-surface:var(--neutral-stone);
--state-disabled-border:var(--neutral-stone);
--state-disabled-text:var(--neutral-mineral);
--feedback-alert:var(--alert-100);
--feedback-alert-soft:var(--neutral-graphite);
/* Texto de link/ghost precisa de luminosidade no escuro: ação fica só em superfície preenchida. */
--link-text:var(--ink-100);
--link-text-hover:var(--neutral-white);
}
.lr-logo{filter:invert(1)}
}

/* ===== Componentes (HTML + CSS puros, espelhando o design system) ===== */
[hidden]{display:none !important}
.lr-page{min-height:100vh;display:flex;flex-direction:column}
.lr-header{height:88px;background:var(--surface-card);box-shadow:inset 0 -1px 0 var(--border-subtle);display:flex;align-items:center;padding:0 var(--space-xl)}
.lr-header img{height:28px;width:auto;display:block}
.lr-main{flex:1;width:100%;max-width:1200px;margin:0 auto;padding:var(--space-3xl) var(--space-xl);box-sizing:border-box;display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:var(--space-2xl);align-items:start}
.lr-intro{display:flex;flex-direction:column;gap:var(--space-lg);max-width:588px}
.lr-intro h1{font-size:clamp(36px,5vw,56px);line-height:1.1;text-wrap:pretty}
.lr-intro p{color:var(--text-secondary);text-wrap:pretty}

.lr-card{background:var(--surface-card);border-radius:var(--radius-card);box-shadow:inset 0 0 0 1px var(--border-subtle);padding:var(--space-xl);max-width:486px;box-sizing:border-box}
.lr-form{display:flex;flex-direction:column;gap:var(--space-lg)}
.lr-form-head{display:flex;flex-direction:column;gap:var(--space-xs)}
.lr-form-head p{color:var(--text-secondary)}
.lr-fields{display:flex;flex-direction:column;gap:var(--space-md)}
.lr-field{display:flex;flex-direction:column;gap:var(--space-xs)}

/* Campo — EcInputCampo: 56px, raio 16, contorno interno 1.5px; foco com anel interno de 2px. */
.lr-input{height:56px;width:100%;box-sizing:border-box;border:0;border-radius:var(--radius-button);padding:var(--space-md) var(--space-lg);background:var(--surface-card);color:var(--text-primary);font:400 var(--type-body-sm-size)/var(--type-body-sm-line) var(--font-sans);box-shadow:inset 0 0 0 1.5px var(--border-subtle);outline:none}
.lr-input:focus{box-shadow:inset 0 0 0 2px var(--focus-ring)}
.lr-input[aria-invalid="true"]{background:var(--feedback-alert-soft);color:var(--feedback-alert);box-shadow:inset 0 0 0 2px var(--feedback-alert)}
.lr-erro{font:400 var(--type-body-sm-size)/var(--type-body-sm-line) var(--font-sans);color:var(--feedback-alert);display:none}
.lr-erro[data-visivel="true"]{display:block}

/* Botão primário — EcButton: superfície de ação institucional, quatro estados. */
.lr-button{width:100%;height:56px;box-sizing:border-box;border:0;border-radius:var(--radius-button);padding:var(--space-md) var(--space-xl);background:var(--action-primary);color:var(--action-on-primary);font:600 var(--type-button-size)/var(--type-button-line) var(--font-sans);letter-spacing:0.18px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background 120ms linear}
.lr-button:hover{background:var(--action-hover)}
.lr-button:active{background:var(--action-pressed)}
.lr-button:focus-visible{outline:none;box-shadow:0 0 0 3px var(--focus-ring)}

.lr-microcopy{color:var(--text-secondary)}
.lr-sucesso{display:flex;flex-direction:column;gap:var(--space-sm)}
.lr-link{align-self:flex-start;margin-top:var(--space-sm);background:none;border:0;padding:0;cursor:pointer;color:var(--link-text);font:500 var(--type-body-sm-size)/var(--type-body-sm-line) var(--font-sans)}
.lr-link:hover{color:var(--link-text-hover)}
.lr-footer{background:var(--surface-card);box-shadow:inset 0 1px 0 var(--border-subtle);padding:var(--space-xl);display:flex;flex-wrap:wrap;gap:var(--space-md);justify-content:space-between;align-items:center}
.lr-footer p{color:var(--text-secondary);max-width:690px}