@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 600;
  font-stretch: normal;
  font-display: swap;
  src: url(../public/fonts/identity-0.ttf) format('truetype');
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 800;
  font-stretch: normal;
  font-display: swap;
  src: url(../public/fonts/identity-1.ttf) format('truetype');
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: normal;
  font-display: swap;
  src: url(../public/fonts/identity-2.ttf) format('truetype');
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: normal;
  font-display: swap;
  src: url(../public/fonts/identity-3.ttf) format('truetype');
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: normal;
  font-display: swap;
  src: url(../public/fonts/identity-4.ttf) format('truetype');
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 700;
  font-stretch: normal;
  font-display: swap;
  src: url(../public/fonts/identity-5.ttf) format('truetype');
}

/* Vitrine Pilares da Arte: identidade visual. Mobile-first. Sem dependências. */

:root {
  --navy: #001236;
  --navy-2: #0B2152;
  --navy-deep: #000A24;
  --sand: #EDE4D3;
  --sand-2: #F7F2E8;
  --sand-3: #E2D6BE;
  --teal: #029CA8;
  --yellow: #FCB700;
  --yellow-hi: #FFC933;
  --orange: #FC561C;
  --white: #FFFFFF;
  --on-dark-muted: #BAC3DB;
  --on-sand-muted: #4B5572;

  --font-display: 'Bricolage Grotesque', 'Arial Black', system-ui, sans-serif;
  --font-body: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --gutter: clamp(16px, 4vw, 40px);
  --header-h: 64px;
  --logo-h: 52px;
}
@media (min-width: 900px) {
  :root { --header-h: 72px; --logo-h: 58px; }
}


/* Shared commerce layout tokens. */
/* Storefront tokens. The isolated Studio retains its own styles. */
:root {
  color-scheme: light;
   --navy-soft: #0B2152;
   --teal-action: #007D87; --teal-hover: #00636B;
  --gold: #FCB700;  --ink: #111111;
  --muted: #59646f; --surface: #F7F2E8;
  --line: #dce1e5; --soft: #EDE4D3; --danger: #a02f2f;
  --space-1: .25rem; --space-2: .5rem; --space-3: .75rem;
  --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem;
  --space-7: 3rem; --space-8: 4rem; --space-9: 5rem;
  --radius-sm: .375rem; --radius: .75rem; --shadow: 0 8px 32px #0b1b330a;

  --font-heading: var(--font-display);
  --text-small: .8125rem; --text-body: 1rem; --text-product: 1.125rem;
  --text-section: clamp(1.75rem, 3vw, 2.5rem);
  --text-hero: clamp(2.5rem, 4.7vw, 4rem);
  --content-width: 1280px;
  --transition: 180ms ease;
}
/* Breakpoints: 480px, 768px, 1024px, 1440px in style.css.
   CSS variables cannot be used as media query conditions. */