/* ==========================================================================
   OFF IMPORT — tokens.css
   Design tokens, reset moderno, tipografia base e utilitarios.
   Carregar SEMPRE antes de components.css e de qualquer CSS do tema.
   ========================================================================== */

/*
 * NOTA TIPOGRAFICA: a Cormorant Garamond usa algarismos old-style por padrao
 * (o 1, o 3 e o 4 descem abaixo da linha de base). Em nome de produto tecnico
 * ("AG11 1000W", "X13") e em preco isso atrapalha a leitura, entao forcamos
 * algarismos alinhados em tudo que e display. Ver regra no fim deste arquivo.
 */

/* == TOKENS / DESIGN CONTRACT == */
:root{
  --oi-cream:#F7F5F0; --oi-cream-2:#FBFAF8; --oi-sand:#EDE7DC; --oi-line:#E4DED2;
  --oi-gold:#A8823C; --oi-gold-soft:#C9A961; --oi-gold-ink:#8A6B2F;
  --oi-graphite:#2B2724; --oi-ink:#3A3532; --oi-muted:#7A716A; --oi-white:#FFFFFF;
  --oi-ok:#2F6B4F; --oi-danger:#A33A2A;
  --oi-font-display:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --oi-font-body:"Jost",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --oi-container:1240px; --oi-radius:2px; --oi-radius-lg:4px;
  --oi-t:180ms cubic-bezier(.4,0,.2,1);
  --oi-shadow-sm:0 1px 2px rgba(43,39,36,.06);
  --oi-shadow-md:0 6px 24px rgba(43,39,36,.10);
  --oi-s1:.25rem; --oi-s2:.5rem; --oi-s3:.75rem; --oi-s4:1rem; --oi-s5:1.5rem;
  --oi-s6:2rem; --oi-s7:3rem; --oi-s8:4rem; --oi-s9:6rem;
}

/* == RESET MODERNO (enxuto) == */
*,
*::before,
*::after{ box-sizing:border-box; }

html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  scroll-behavior:smooth;
}

body,
h1,h2,h3,h4,h5,h6,
p,figure,blockquote,dl,dd,
fieldset,legend,
ul,ol{
  margin:0;
  padding:0;
}

ul[class],
ol[class]{ list-style:none; }

img,
picture,
video,
canvas,
svg,
iframe{
  display:block;
  max-width:100%;
}

img,
video{ height:auto; }

svg{ fill:currentColor; }

input,
button,
textarea,
select{
  font:inherit;
  color:inherit;
  letter-spacing:inherit;
}

button{
  background:none;
  border:0;
  cursor:pointer;
}

fieldset{ border:0; }

textarea{ resize:vertical; }

table{
  border-collapse:collapse;
  width:100%;
}

hr{
  border:0;
  border-top:1px solid var(--oi-line);
  margin:var(--oi-s6) 0;
}

/* == TIPOGRAFIA BASE == */
html{
  font-size:100%;
}

body{
  font-family:var(--oi-font-body);
  font-size:1rem;
  line-height:1.65;
  font-weight:400;
  color:var(--oi-ink);
  background-color:var(--oi-white);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  min-height:100vh;
}

h1,h2,h3,h4,h5,h6{
  font-family:var(--oi-font-display);
  color:var(--oi-graphite);
  font-weight:400;
  line-height:1.14;
  letter-spacing:-.005em;
  text-wrap:balance;
}

h1{
  font-size:clamp(2.25rem, 1.55rem + 3.1vw, 4rem);
  font-weight:300;
  line-height:1.08;
}

h2{
  font-size:clamp(1.85rem, 1.35rem + 2.1vw, 3rem);
  font-weight:300;
  line-height:1.12;
}

h3{
  font-size:clamp(1.45rem, 1.18rem + 1.15vw, 2.125rem);
  font-weight:400;
}

h4{
  font-size:clamp(1.25rem, 1.10rem + .65vw, 1.625rem);
  font-weight:500;
  line-height:1.25;
}

h5{
  font-size:clamp(1.125rem, 1.05rem + .35vw, 1.3125rem);
  font-weight:500;
  line-height:1.3;
}

h6{
  font-size:clamp(1rem, .96rem + .2vw, 1.125rem);
  font-weight:500;
  line-height:1.35;
  letter-spacing:.01em;
}

p{ text-wrap:pretty; }

p + p{ margin-top:var(--oi-s4); }

a{
  color:var(--oi-gold-ink);
  text-decoration:none;
  text-underline-offset:.18em;
  transition:color var(--oi-t), opacity var(--oi-t);
}

a:hover{ color:var(--oi-gold); }

strong,b{ font-weight:600; }

small{ font-size:.8125rem; }

blockquote{
  font-family:var(--oi-font-display);
  font-size:clamp(1.25rem, 1.08rem + .75vw, 1.625rem);
  font-weight:300;
  font-style:italic;
  line-height:1.4;
  color:var(--oi-graphite);
  border-left:1px solid var(--oi-gold-soft);
  padding-left:var(--oi-s5);
}

code,
kbd,
pre,
samp{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.875em;
}

::selection{
  background:var(--oi-sand);
  color:var(--oi-graphite);
}

/* == UTILITARIOS == */
.oi-container{
  width:100%;
  max-width:var(--oi-container);
  margin-inline:auto;
  padding-inline:var(--oi-s5);
}

@media (min-width:640px){
  .oi-container{ padding-inline:var(--oi-s6); }
}

@media (min-width:1100px){
  .oi-container{ padding-inline:var(--oi-s7); }
}

.oi-container--narrow{ max-width:820px; }

.oi-section{
  padding-block:var(--oi-s8);
}

@media (min-width:900px){
  .oi-section{ padding-block:var(--oi-s9); }
}

.oi-section--tight{ padding-block:var(--oi-s7); }

.oi-section--cream{ background-color:var(--oi-cream); }
.oi-section--cream-2{ background-color:var(--oi-cream-2); }
.oi-section--sand{ background-color:var(--oi-sand); }

.oi-eyebrow{
  display:block;
  font-family:var(--oi-font-body);
  font-size:.72rem;
  font-weight:600;
  line-height:1.4;
  text-transform:uppercase;
  letter-spacing:.18em;
  color:var(--oi-gold);
  margin-bottom:var(--oi-s3);
}

.oi-center{
  text-align:center;
  margin-inline:auto;
}

.oi-muted{ color:var(--oi-muted); }

.oi-lead{
  font-size:clamp(1.0625rem, 1rem + .3vw, 1.25rem);
  line-height:1.6;
  color:var(--oi-muted);
}

.oi-stack > * + *{ margin-top:var(--oi-s4); }

.oi-visually-hidden{
  position:absolute !important; /* !important: sobrepoe position estatico herdado de temas/Woo em labels e legends */
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}

/* == FOCO ACESSIVEL == */
:focus{ outline:none; }

:focus-visible{
  outline:2px solid var(--oi-gold);
  outline-offset:2px;
  border-radius:var(--oi-radius);
}

/* Fallback para navegadores sem :focus-visible */
@supports not selector(:focus-visible){
  :focus{
    outline:2px solid var(--oi-gold);
    outline-offset:2px;
  }
}

.oi-skip-link{
  position:absolute;
  top:0;
  left:var(--oi-s4);
  z-index:9999;
  transform:translateY(-150%);
  background:var(--oi-graphite);
  color:var(--oi-cream);
  font-size:.8125rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  padding:var(--oi-s3) var(--oi-s5);
  border-radius:0 0 var(--oi-radius) var(--oi-radius);
  transition:transform var(--oi-t);
}

.oi-skip-link:focus-visible{
  transform:translateY(0);
  color:var(--oi-cream);
}

/* == MOVIMENTO REDUZIDO == */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }

  *,
  *::before,
  *::after{
    animation-duration:.01ms !important; /* !important: precisa vencer animacoes inline/plugins Woo */
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}

/* == ALGARISMOS ALINHADOS (LINING FIGURES) == */
/*
 * A Cormorant Garamond entrega old-style figures por padrao. Em titulo de
 * produto, preco e qualquer numero de especificacao isso vira ruido de leitura
 * ("AG11 1000W" com numeros descendo). Aqui normalizamos para lining + tabular.
 */
h1, h2, h3, h4, h5, h6,
.oi-brand-text,
.oi-card-title,
.woocommerce-loop-product__title,
.product_title,
.price,
.amount,
.oi-installments,
.woocommerce-Price-amount {
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum" 1, "tnum" 1;
}
