/* ============================================================
   CSS Custom Properties
   ============================================================ */

:root {
  /* Background */
  --bg-primary: #F5F0E8;
  --bg-card: #FFFFFF;

  /* Text */
  --text-primary: #38392E;
  --text-heading: #000000;
  --text-muted: #888;

  /* Accent */
  --accent: #d9b36e;
  --accent-glow: #FF9D5C;

  /* Navigation / Footer */
  --nav-bg: #000000;
  --footer-bg: #FFFFFF;

  /* Typography scale */
  --font-body: 'Outfit', sans-serif;
  --font-display: 'Amatic SC', cursive;
  --font-mono: 'Space Mono', monospace;

  /* Spacing */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 2rem;
  --space-xl: 4rem;
  --space-2xl: 8rem;

  /* Border radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-full: 9999px;

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.10);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12);
}

/* ============================================================
   Homepage palette (pnza-redesign)
   Scoped under body.pnza-homepage only — keep these tokens from
   leaking into non-home pages that rely on the legacy palette.
   ============================================================ */

/* Redesign palette — applied site-wide since the theme is dark-only. */
:root {
  --home-bg:     #0e0d0b;
  --home-bg-2:   #171612;
  --home-bg-3:   #1f1d17;
  --home-ink:    #f4ecd8;
  --home-muted:  #8a8372;
  --home-line:   #2a2822;
  --home-gold:   #d9b36e;
  --home-hot:    #e8593c;
  --home-cream:  #F5F0E8;
}

/* Body uses the redesign palette on every page, overriding the legacy
   dark-mode tokens declared further below. */
html[data-theme] body {
  background: var(--home-bg);
  color: var(--home-ink);
}

/* ============================================================
   Canonical typography + spacing tokens (pnza-redesign)
   Single source of truth — see ai/work/inbox/plans/2026-04-29-00-40-typography-spacing-consolidation.md
   Page-level CSS files consume these via var(--token); never inline literal values.
   ============================================================ */
:root {
  /* Type scale (px, fixed) */
  --fs-12: 12px;
  --fs-14: 14px;
  --fs-15: 15px;
  --fs-16: 16px;
  --fs-17: 17px;
  --fs-18: 18px;
  --fs-19: 19px;
  --fs-21: 21px;
  --fs-30: 30px;
  --fs-eyebrow-sm: 24px;
  --fs-eyebrow-md: 36px;
  --fs-eyebrow-lg: 44px;

  /* Display heading scale (responsive) */
  --fs-display-xl: clamp(56px, 9vw, 132px);
  --fs-display-lg: clamp(48px, 7vw, 88px);
  --fs-display-md: clamp(36px, 5vw, 64px);
  --fs-display-sm: clamp(28px, 3.5vw, 44px);
  --fs-display-xs: clamp(22px, 2.4vw, 28px);
  --fs-display-xl-mobile: clamp(44px, 11vw, 72px);

  /* Component-scoped tokens (NOT shared with layout/eyebrow scales) */
  --fs-polaroid-title: 26px;

  /* Line-height ladder */
  --lh-tight: 0.95;
  --lh-display: 1.05;
  --lh-eyebrow: 1.0;
  --lh-heading: 1.1;
  --lh-body: 1.6;
  --lh-loose: 1.8;

  /* Letter-spacing ladder */
  --ls-tight-xl: -0.045em;
  --ls-tight: -0.04em;
  --ls-default: 0;
  --ls-eyebrow: 0.04em;
  --ls-uppercase: 0.1em;

  /* Spacing scale (8px-rooted) */
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-8: 48px;
  --sp-9: 56px;
  --sp-10: 72px;
  --sp-12: 96px;
  --sp-14: 120px;
  --sp-18: 144px;

  /* Layout containers */
  --mw-site: 1320px;
  --mw-content: 880px;
  --mw-form: 480px;
  --mw-prose: 70ch;

  /* Breakpoints (documentation only; @media takes the literal value)
     --bp-narrow: 768px   dense-data layout collapse (cart/checkout/account/single-product gallery/longdesc)
     --bp-mobile: 1099px  marketing-section layout collapse (hero/quality/products/story/newsletter/about/contact/blog/shop/page/footer-grid) */
}

[data-theme="dark"] {
  /* Background */
  --bg-primary: #1A1A1A;
  --bg-card: #242424;

  /* Text */
  --text-primary: #F5F0E8;
  --text-heading: #F5F0E8;
  --text-muted: #888;

  /* Accent stays the same */
  --accent: #d9b36e;
  --accent-glow: #FF9D5C;

  /* Navigation / Footer */
  --nav-bg: #000000;
  --footer-bg: #1a1a1a;
}

.pnza-container {
    max-width: 1440px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

/* ============================================================
   Reset
   ============================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

fieldset {
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Defense-in-depth backstop: the homepage product/brand-story sections
     scope their own overflow:clip, but extra decorations in WC plugins
     or third-party widgets occasionally bleed past the viewport on
     mobile. `clip` (vs `hidden`) does not break position:fixed children
     such as the .pnza-leak-bg overlay. */
  overflow-x: clip;
}

body {
  overflow-x: clip;
}

/* Smooth theme transition - added via JS during toggle, removed after */
html.theme-transitioning,
html.theme-transitioning *,
html.theme-transitioning *::before,
html.theme-transitioning *::after {
  transition: background-color 0.5s ease, color 0.5s ease, border-color 0.5s ease, box-shadow 0.5s ease, fill 0.5s ease, stroke 0.5s ease !important;
}

body {
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--text-primary);
  background-color: var(--bg-primary);
  line-height: 1.6;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html {
  background-color: var(--bg-primary);
}

img,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

/* SVGs: only apply block display to standalone SVGs, not inline icon/doodle SVGs */
svg:not(.hover-underline):not(.hover-circle):not(.doodle-icon):not(.pnza-handwrite):not(.arrow-icon):not(.social-icon) {
  max-width: 100%;
}

input,
button,
textarea,
select {
  font: inherit;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

ul,
ol {
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
  font-weight: 700;
}

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

/* ============================================================
   Typography
   ============================================================ */

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-body);
  font-weight: 800;
  text-transform: lowercase;
  color: var(--text-heading);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

h1 { font-size: clamp(2rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.75rem, 4vw, 2.75rem); }
h3 { font-size: clamp(1.375rem, 3vw, 2rem); }
h4 { font-size: clamp(1.125rem, 2.5vw, 1.5rem); }
h5 { font-size: clamp(1rem, 2vw, 1.25rem); }
h6 { font-size: 1rem; }

p {
  margin-bottom: var(--space-md);
}

p:last-child {
  margin-bottom: 0;
}

strong,
b {
  font-weight: 700;
}

em,
i {
  font-style: italic;
}

small {
  font-size: 1em;
}

/* ============================================================
   Scrollbar
   ============================================================ */

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: #c5bfb3 #e8e3db;
}

/* Webkit */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #e8e3db;
}

::-webkit-scrollbar-thumb {
  background-color: #c5bfb3;
  border-radius: var(--radius-full);
  border: 2px solid #e8e3db;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #a8a09a;
}

/* ============================================================
   Focus styles
   ============================================================ */

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* ============================================================
   Selection
   ============================================================ */

::selection {
  background-color: var(--accent);
  color: #fff;
}

/* ============================================================
   Scanned/film grain texture overlay
   ============================================================ */

.pnza-grain-texture::after {
    content: '';
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='0.06'/%3E%3C/svg%3E");
    mix-blend-mode: multiply;
    pointer-events: none;
    z-index: 1;
}

/* ============================================================
   Utility: screen reader only
   ============================================================ */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* ============================================================
   Dark Mode - base overrides
   ============================================================ */

html[data-theme="dark"] {
  background: #1A1A1A;
  color-scheme: dark;
}

[data-theme="dark"] body,
[data-theme="dark"] {
  background: #1A1A1A;
  color: #F5F0E8;
}

[data-theme="dark"] a {
  color: #F5F0E8;
}

[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6 {
  color: #F5F0E8;
}

/* Scrollbar */
[data-theme="dark"] * {
  scrollbar-color: #444 #1A1A1A;
}

[data-theme="dark"] ::-webkit-scrollbar-track {
  background: #1A1A1A;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background-color: #444;
  border-color: #1A1A1A;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background-color: #555;
}

/* ============================================================
   Content container: full-width backgrounds, content capped
   at 1440px via max() padding. Each section sets its own.
   ============================================================ */

@media (hover: none), (pointer: coarse) {
  .doodle-hover .hover-underline {
    display: none !important;
  }

  .doodle-circle-hover .hover-circle path,
  .doodle-circle-hover .doodle-circle-hover__circle {
    display: none !important;
  }

  .pnza-polaroid:hover {
    transform: rotate(var(--rotation, 0deg)) !important;
    box-shadow: 2px 4px 16px rgba(0, 0, 0, 0.1) !important;
  }
}