/* Appily Eightynine — Studio Ledger design tokens */
:root {
  --a89-canvas: #E7ECE9;
  --a89-paper: #FAFBFA;
  --a89-ink: #0C1A14;
  --a89-mute: #3D4F47; /* darkened for WCAG AA on paper/canvas */
  --a89-line: rgba(12, 26, 20, 0.14);
  --a89-line-strong: rgba(12, 26, 20, 0.28);
  --a89-rose: #E11D48;
  --a89-rose-deep: #BE123C;
  --a89-grove: #0D9488;
  --a89-grove-deep: #0F766E;
  --a89-sand: #D8E0DA;
  --a89-yellow: #F5C518; /* accents / active tabs on dark ink */
  --a89-yellow-dark: #B8860B;
  --a89-radius: 4px;
  --a89-radius-lg: 18px;
  --a89-shadow: 0 18px 40px rgba(12, 26, 20, 0.1);
  --a89-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --a89-snap: cubic-bezier(0.34, 1.4, 0.64, 1);
  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Public Sans", "Segoe UI", sans-serif;
  --a89-photo-bg:
    repeating-linear-gradient(0deg, transparent, transparent 23px, rgba(12,26,20,0.04) 24px),
    repeating-linear-gradient(90deg, transparent, transparent 23px, rgba(12,26,20,0.04) 24px),
    #EEF2EF;

  /* Legacy aliases for older page sheets */
  --a89-void: var(--a89-canvas);
  --a89-deep: var(--a89-paper);
  --a89-panel: var(--a89-paper);
  --a89-glass: var(--a89-paper);
  --a89-glass-strong: #fff;
  --a89-glass-border: var(--a89-line);
  --a89-lime: var(--a89-grove);
  --a89-lime-deep: var(--a89-grove-deep);
  --a89-coral: var(--a89-rose);
  --a89-coral-deep: var(--a89-rose-deep);
  --a89-mist: var(--a89-ink);
  --a89-fog: var(--a89-mute);
  --a89-champagne: var(--a89-ink);
  --a89-teal: var(--a89-grove);
  --a89-teal-dark: var(--a89-grove-deep);
  --a89-mango: var(--a89-rose);
  --a89-mango-dark: var(--a89-rose-deep);
  --a89-berry: var(--a89-rose);
  --a89-purple: var(--a89-grove-deep);
  --a89-mint: var(--a89-grove);
  --a89-cream: var(--a89-paper);
  --a89-warm: var(--a89-canvas);
  --a89-white: var(--a89-paper);
  --a89-muted: var(--a89-mute);
  --a89-border: var(--a89-line);
  --a89-gold: #C4A574;
  --a89-link: var(--a89-grove-deep);
  --a89-terracotta: var(--a89-rose);
  --a89-terracotta-dark: var(--a89-rose-deep);
  --a89-olive: var(--a89-grove);
  --a89-sage: var(--a89-mute);
  --a89-hero-orange: var(--a89-rose);
  --a89-hero-green: var(--a89-grove);
  --a89-red: var(--a89-rose);
  --a89-layout-gap: clamp(1rem, 2vw, 1.75rem);
  --a89-sidebar-min: 220px;
  --a89-sidebar-max: 300px;
  --a89-stage-cols: minmax(0, 1fr) minmax(var(--a89-sidebar-min), var(--a89-sidebar-max));
  --a89-blur: 0px;

  --lk-ink: var(--a89-ink);
  --lk-panel: var(--a89-paper);
  --lk-surface: var(--a89-canvas);
  --lk-muted: var(--a89-mute);
  --lk-line: var(--a89-line);
  --lk-mint: var(--a89-grove);
  --lk-mango: var(--a89-rose);
  --lk-berry: var(--a89-rose);
  --tote-ink: var(--a89-ink);
  --tote-panel: var(--a89-paper);
  --tote-surface: var(--a89-canvas);
  --tote-muted: var(--a89-mute);
  --tote-line: var(--a89-line);
  --tote-mint: var(--a89-grove);
  --tote-mango: var(--a89-rose);
  --tote-berry: var(--a89-rose);
  --comb-ink: var(--a89-ink);
  --comb-panel: var(--a89-paper);
  --comb-surface: var(--a89-canvas);
  --comb-muted: var(--a89-mute);
  --comb-line: var(--a89-line);
  --comb-mint: var(--a89-grove);
  --comb-mango: var(--a89-rose);
  --comb-berry: var(--a89-rose);
  --comb-violet: var(--a89-grove-deep);
  --comb-sky: var(--a89-grove);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body.a89-store {
  margin: 0;
  font-family: var(--font-body);
  color: var(--a89-ink);
  background: var(--a89-canvas);
  line-height: 1.55;
  min-height: 100vh;
}
.a89-grid-skin {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.55;
  background:
    repeating-linear-gradient(0deg, transparent, transparent 47px, rgba(12,26,20,0.035) 48px),
    repeating-linear-gradient(90deg, transparent, transparent 47px, rgba(12,26,20,0.035) 48px);
}
.page-wrap {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 1;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--a89-grove-deep); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
.container {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: clamp(1rem, 3vw, 1.75rem);
}
.page-main {
  min-height: 50vh;
  flex: 1;
  padding-top: 5rem;
}
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.section { padding: clamp(2.5rem, 5vw, 4rem) 0; }
.section-muted { background: var(--a89-sand); border-block: 1px solid var(--a89-line); }

.a89-section-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--a89-ink);
  line-height: 1.1;
}
.a89-section-title em {
  font-style: italic;
  color: var(--a89-rose);
  font-weight: 600;
}

.a89-btn-shop,
.btn,
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.9rem 1.45rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.88rem;
  letter-spacing: 0.02em;
  border: 2px solid var(--a89-ink);
  cursor: pointer;
  text-decoration: none !important;
  background: var(--a89-ink);
  color: #FAFBFA;
  transition: transform 0.25s var(--a89-snap), background 0.2s, box-shadow 0.25s, color 0.2s;
  box-shadow: 4px 4px 0 var(--a89-rose);
}
.a89-btn-shop:hover,
.a89-btn-shop:focus-visible,
.btn:hover,
.btn:focus-visible,
.btn-primary:hover,
.btn-primary:focus-visible {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--a89-rose);
  background: var(--a89-ink);
  color: #FAFBFA;
  text-decoration: none !important;
  outline: none;
}
.a89-btn-shop--dark,
.btn-secondary {
  background: var(--a89-paper);
  color: var(--a89-ink);
  box-shadow: 4px 4px 0 var(--a89-grove);
}
.a89-btn-shop--dark:hover,
.a89-btn-shop--dark:focus-visible,
.btn-secondary:hover,
.btn-secondary:focus-visible {
  box-shadow: 6px 6px 0 var(--a89-grove);
  background: var(--a89-paper);
  color: var(--a89-ink);
  text-decoration: none !important;
  outline: none;
}
.a89-btn-all {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 700;
  color: var(--a89-rose);
  text-decoration: none !important;
  border: 2px solid var(--a89-ink);
  border-radius: 999px;
  background: var(--a89-paper);
  padding: 0.55rem 1rem;
  box-shadow: 2px 2px 0 var(--a89-rose);
  transition: border-color 0.2s, gap 0.2s, transform 0.2s, background 0.2s, color 0.2s;
}
.a89-btn-all:hover {
  border-color: var(--a89-rose);
  background: var(--a89-ink);
  color: #FAFBFA;
  gap: 0.65rem;
  transform: translate(-1px, -1px);
  text-decoration: none !important;
}
.btn-outline {
  background: transparent;
  color: var(--a89-ink);
  border: 2px solid var(--a89-ink);
  box-shadow: none;
}
.btn-outline:hover,
.btn-outline:focus-visible {
  background: var(--a89-sand);
  color: var(--a89-ink);
  outline: none;
}

/* Site-wide contrast locks (buttons, forms, muted copy) */
input,
select,
textarea {
  color: var(--a89-ink);
}
input::placeholder,
textarea::placeholder {
  color: var(--a89-mute);
  opacity: 1;
}
button:disabled,
.btn:disabled,
.btn[disabled] {
  color: var(--a89-mute) !important;
  background: var(--a89-sand) !important;
  border-color: var(--a89-line-strong) !important;
  box-shadow: none !important;
}

@keyframes a89-rise {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: none; }
}
@keyframes a89-stamp-press {
  0% { transform: scale(1) rotate(0deg); }
  40% { transform: scale(0.96) rotate(-1deg); }
  100% { transform: scale(1) rotate(0deg); }
}
@keyframes a89-pulse-ring {
  0% { transform: scale(1); opacity: 0.55; }
  100% { transform: scale(1.55); opacity: 0; }
}