/*
 * Tokens --ds-* da loja v3 (layout claro), fontes e base do documento.
 * Kit: docs/kit-loja-v3-layout-claro.md, seção 2. Os valores abaixo são os PADRÕES. O Personalizar redefine os
 * que o lojista muda por um <style id="lm-tokens"> inline (inc/customizer-tokens.php, mapa único); as cores
 * derivadas (hover, fundo suave, bordas de campo, sombras) usam color-mix() e acompanham a cor base.
 * Fontes locais: Space Grotesk (500 e 700, OFL) e Nunito Sans (400 e 700; o 600 usa o arquivo do 700).
 */

@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:500 700;font-display:swap;src:url("../fonts/space-grotesk-latin-500-700.woff2") format("woff2")}
@font-face{font-family:"Nunito Sans";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/nunito-sans-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Nunito Sans";font-style:normal;font-weight:600 700;font-display:swap;src:url("../fonts/nunito-sans-latin-700-normal.woff2") format("woff2")}

/* Substitutas com a mesma largura e altura de linha, para a troca de fonte não mover o texto. */
@font-face{font-family:"Space Grotesk Fallback";font-weight:500 700;src:local("Arial Bold"),local("Arial-BoldMT");size-adjust:102%;ascent-override:96%;descent-override:26%;line-gap-override:0%}
@font-face{font-family:"Nunito Sans Fallback";font-weight:400;src:local("Arial"),local("ArialMT");size-adjust:99.8%;ascent-override:101.3%;descent-override:35.4%;line-gap-override:0%}
@font-face{font-family:"Nunito Sans Fallback";font-weight:600 700;src:local("Arial Bold"),local("Arial-BoldMT");size-adjust:96.2%;ascent-override:105.1%;descent-override:36.7%;line-gap-override:0%}

:root{
	/* ---- Cor (kit 2) ---- */
	--ds-color-bg:#EFEFEC;
	--ds-color-surface:#FFFFFF;
	--ds-color-line:#DAD9D4;
	--ds-color-text:#31302F;
	--ds-color-text-muted:#5E5C5A;
	--ds-color-navy:#232150;
	--ds-color-blue:#1E6CAA;
	--ds-color-blue-soft:#DCEBF7;
	--ds-color-on-navy:#FFFFFF;
	--ds-color-on-accent:#FFFFFF;
	/* Derivadas: acompanham as cores editáveis do Personalizar (inc/customizer-tokens.php). */
	--ds-color-surface-soft:color-mix(in srgb,var(--ds-color-surface) 25%,var(--ds-color-bg));
	--ds-color-border:color-mix(in srgb,var(--ds-color-text) 50%,var(--ds-color-bg));
	--ds-color-text-small:color-mix(in srgb,var(--ds-color-text) 30%,var(--ds-color-text-muted));
	--ds-color-placeholder:color-mix(in srgb,var(--ds-color-text-muted) 90%,var(--ds-color-bg));
	--ds-color-navy-2:color-mix(in srgb,var(--ds-color-navy) 78%,#fff);
	--ds-color-blue-2:color-mix(in srgb,var(--ds-color-blue) 88%,#fff);
	--ds-color-on-navy-muted:color-mix(in srgb,var(--ds-color-on-navy) 86%,var(--ds-color-navy));
	--ds-color-on-navy-line:color-mix(in srgb,var(--ds-color-on-navy) 55%,transparent);
	--ds-color-on-navy-dot:color-mix(in srgb,var(--ds-color-on-navy) 40%,transparent);
	--ds-color-shelf:color-mix(in srgb,var(--ds-color-bg) 95%,#000);
	--ds-color-shelf-line:color-mix(in srgb,var(--ds-color-bg) 87%,#000);
	--ds-color-success-bg:#D9F2E3;
	--ds-color-success-text:#14532D;
	--ds-color-success-icon:#1F7A4D;
	--ds-color-danger:#B3261E;
	--ds-color-danger-bg:#FBE4E1;
	--ds-color-pending:#F7D774;
	--ds-color-page:#FBF6E9;
	--ds-color-page-edge:#DDD7C8;
	--ds-color-scrim:color-mix(in srgb,var(--ds-color-navy) 55%,transparent);
	--ds-color-cover-spine:rgba(0,0,0,.10);
	--ds-color-shadow:color-mix(in srgb,var(--ds-color-navy) 6%,transparent);
	--ds-color-shadow-art:rgba(0,0,0,.28);

	/* Nomes da v2 que continuam em uso, com os valores do layout claro */
	--ds-color-accent:var(--ds-color-blue);
	--ds-color-accent-hover:var(--ds-color-navy);
	--ds-color-bg-deep:var(--ds-color-navy);
	--ds-color-panel:var(--ds-color-surface);
	--ds-color-panel-text:var(--ds-color-text);
	--ds-color-panel-link:var(--ds-color-blue);
	--ds-color-success:var(--ds-color-success-icon);
	--ds-color-line-strong:var(--ds-color-border);
	--ds-color-accent-wash:var(--ds-color-blue-soft);

	/* Paleta das capas e das coleções (padrão) */
	--ds-pal-1:#F7D774;
	--ds-pal-2:#C8B8F5;
	--ds-pal-3:#9FE3C0;
	--ds-pal-4:#F2B3D1;
	--ds-pal-5:#8ED0F0;
	--ds-pal-6:#FFC9A8;
	--ds-pal-7:#B9E3A1;
	--ds-pal-8:#E3C6F2;
	--ds-pal-9:#F6B9A6;

	/* ---- Tipografia ---- */
	--ds-font-heading:"Space Grotesk","Space Grotesk Fallback",sans-serif;
	--ds-font-body:"Nunito Sans","Nunito Sans Fallback",system-ui,sans-serif;
	--ds-weight-regular:400;
	--ds-weight-semibold:600;
	--ds-weight-bold:700;
	--ds-text-body-size:16px;
	--ds-text-body-line:1.5;
	--ds-text-label-size:15px;
	--ds-text-small-size:14px;
	--ds-text-small-line:1.45;
	--ds-text-tag-size:13px;
	--ds-text-h1-size:34px;
	--ds-text-h1-form-size:30px;
	--ds-text-hero-size:36px;
	--ds-text-h2-size:28px;
	--ds-text-h3-size:22px;
	--ds-text-price-size:17px;

	/* ---- Espaço, forma e alvo ---- */
	--ds-space-1:4px;
	--ds-space-2:8px;
	--ds-space-3:12px;
	--ds-space-4:16px;
	--ds-space-5:20px;
	--ds-space-6:24px;
	--ds-space-8:32px;
	--ds-space-10:48px;
	--ds-space-16:64px;
	--ds-radius-pill:999px;
	--ds-radius-box:20px;
	--ds-radius-box-lg:28px;
	--ds-radius-hero:32px;
	--ds-radius-field:12px;
	--ds-radius-seg:14px;
	--ds-radius-seg-item:10px;
	--ds-radius-cover:12px;
	--ds-border-width:1px;
	--ds-border-strong:1.5px;
	--ds-border-dashed:2px;
	--ds-target:44px;
	--ds-button-h:48px;
	--ds-field-h:48px;
	--ds-icon:24px;
	--ds-badge:20px;
	--ds-content-max:1240px;
	--ds-gutter:clamp(12px,2.5vw,32px);
	--ds-search-max:460px;
	--ds-logo-h:40px;
	--ds-logo-h-ck:40px;
	--ds-logo-h-rodape:40px;
	--ds-measure:70ch;
	--ds-focus-width:2px;
	--ds-focus-offset:2px;
	--ds-duration-fast:120ms;
	--ds-duration-base:200ms;
	--ds-duration-card:300ms;
}
@media (min-width:640px){:root{--ds-text-h1-size:44px;--ds-text-h1-form-size:44px}}
@media (min-width:761px){:root{--ds-text-hero-size:52px}}

/* ---- Base do documento ---- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--ds-color-bg);color:var(--ds-color-text);font:var(--ds-weight-regular) var(--ds-text-body-size)/var(--ds-text-body-line) var(--ds-font-body);-webkit-font-smoothing:antialiased}
img,svg,video,canvas{max-width:100%}
img{height:auto;border:0}
a{color:var(--ds-color-blue);text-decoration:none}
a:hover{color:var(--ds-color-navy)}
h1,h2,h3,h4,h5,h6{margin:0 0 var(--ds-space-3);font-family:var(--ds-font-heading);font-weight:var(--ds-weight-bold);line-height:1.15;color:var(--ds-color-text)}
h1{font-size:var(--ds-text-h1-size)}
h2{font-size:var(--ds-text-h2-size);line-height:1.2}
h3{font-size:var(--ds-text-h3-size);line-height:1.25}
p{margin:0 0 var(--ds-space-4)}
ul,ol{margin:0 0 var(--ds-space-4);padding-left:var(--ds-space-6)}
button,input,select,textarea{font:inherit;color:inherit}
fieldset{margin:0;padding:0;border:0;min-width:0}
legend{padding:0}
hr{border:0;border-top:var(--ds-border-width) solid var(--ds-color-line);margin:var(--ds-space-6) 0}
table{border-collapse:collapse;width:100%}
th,td{text-align:left;padding:var(--ds-space-2) var(--ds-space-3);vertical-align:top}
.screen-reader-text,.sr-only{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);border:0;white-space:nowrap}
.screen-reader-text:focus{position:static!important;width:auto;height:auto;margin:0;clip:auto;clip-path:none;white-space:normal}
[hidden]{display:none!important}

/* Foco: azul, 2 px, deslocamento de 2 px, só no teclado (branco sobre o marinho). */
a:focus:not(:focus-visible),button:focus:not(:focus-visible),summary:focus:not(:focus-visible),[tabindex]:focus:not(:focus-visible){outline:0}
:is(a,button,summary,input,textarea,select,[tabindex]:not([tabindex="-1"])):focus-visible{outline:var(--ds-focus-width) solid var(--ds-color-blue);outline-offset:var(--ds-focus-offset)}
:is(.lm-on-navy,.lm-footer,.lm-hero) :is(a,button,summary,input,textarea,select,[tabindex]):focus-visible{outline-color:var(--ds-color-on-navy)}

/* Movimento reduzido: sem animações e transições. */
@media (prefers-reduced-motion:reduce){
	*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}
