/* ============================================================
   base.css — reset, design tokens, typography
   Aurelle (fictional demo store) — Clean Scandinavian aesthetic
   ============================================================ */

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

* { margin: 0; }

:root {
  /* Palette */
  --cream:      #f6f1ea;
  --cream-2:    #efe7db;
  --sand:       #e7ddce;
  --taupe:      #b8a793;
  --taupe-deep: #8c7a64;
  --ink:        #2b2622;
  --ink-soft:   #5c554d;
  --clay:       #b06a52;   /* accent */
  --clay-deep:  #96543f;
  --line:       #ddd2c2;
  --white:      #fffdf9;

  /* Typography */
  --font-serif: "Fraunces", Georgia, "Times New Roman", serif;
  --font-sans:  "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Spacing / radius / shadow */
  --radius-sm: 8px;
  --radius:    14px;
  --radius-lg: 22px;
  --shadow-sm: 0 1px 2px rgba(43, 38, 34, .06);
  --shadow:    0 10px 30px -12px rgba(43, 38, 34, .22);
  --shadow-lg: 0 30px 60px -20px rgba(43, 38, 34, .32);

  --maxw: 1160px;
  --gutter: clamp(20px, 5vw, 64px);

  /* Motion — distinct curves per Emil Kowalski's framework */
  --ease:        cubic-bezier(.22, 1, .36, 1);   /* strong ease-out: enter/exit */
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);  /* on-screen movement */
  --ease-drawer: cubic-bezier(.32, .72, 0, 1);   /* iOS-like drawer/sheet */
  --dur:  .38s;
}

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

body {
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--cream);
  line-height: 1.6;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

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

/* Short body text reads better with pretty wrapping (no orphan last words). */
p { text-wrap: pretty; }

h1, h2, h3 {
  font-family: var(--font-serif);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-wrap: balance;
}

h1 { font-size: clamp(2.4rem, 5.4vw, 3.9rem); }
h2 { font-size: clamp(1.9rem, 3.8vw, 2.9rem); }
h3 { font-size: 1.15rem; letter-spacing: 0; }

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
input { font: inherit; }

/* Updating figures (prices, counts, quantities, totals) shouldn't reflow
   as digit widths change. */
.tnum,
.price__now, .price__was, .cart-btn__count, .qty__value,
.cart-line__price, .cart-line__qty span, .drawer__row strong,
.order-summary, .success__order {
  font-variant-numeric: tabular-nums;
}

.eyebrow {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .18em;
  font-weight: 600;
  color: var(--taupe-deep);
}

.label {
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 600;
  color: var(--ink-soft);
}

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

.skip-link {
  position: absolute; left: 12px; top: -60px;
  background: var(--ink); color: var(--white);
  padding: 10px 16px; border-radius: var(--radius-sm);
  z-index: 200; transition: top .2s var(--ease);
}
.skip-link:focus { top: 12px; }

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}