/* Atwood Design System — tokens + semantic type
   Import first, before any component styles.
   Fonts: Google Fonts (Fraunces display / Inter text / JetBrains Mono) — substituted
   from Hers' custom hand-drawn serif. Flag to user for final brand approval. */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght,SOFT@9..144,400;9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ——————————————————————————————————————————
     COLOR — raw
     —————————————————————————————————————————— */
  --cedar-900: #1F3026;
  --cedar-800: #2F4A3C;
  --cedar-700: #3B5A4A;   /* primary */
  --cedar-600: #4E6E5E;
  --cedar-500: #5F8070;
  --moss-500:  #7A9885;   /* secondary */
  --moss-300:  #A6BFAF;
  --sage-200:  #C8D6CC;   /* tints, dividers */
  --sage-100:  #DDE6E0;

  --bone:      #F4EFE6;   /* primary surface */
  --paper:     #FBF8F2;   /* alternate surface */
  --ink:       #1A1F1B;   /* body text */
  --slate:     #4A5650;   /* secondary text */
  --mute:      #8B968F;   /* tertiary text */

  --amber-600: #B16B2E;
  --amber-500: #C67B3C;   /* highlight */
  --amber-200: #E9CDA8;
  --clay-500:  #D4A373;   /* illustration only */

  --danger:    #B4493E;
  --success:   #5F8070;   /* = moss, intentional */

  /* ——————————————————————————————————————————
     COLOR — semantic
     —————————————————————————————————————————— */
  --bg:            var(--bone);
  --bg-alt:        var(--paper);
  --bg-inverse:    var(--cedar-700);
  --fg1:           var(--ink);
  --fg2:           var(--slate);
  --fg3:           var(--mute);
  --fg-inverse:    var(--bone);
  --accent:        var(--cedar-700);
  --accent-hover:  var(--cedar-800);
  --accent-press:  var(--cedar-900);
  --accent-tint:   var(--sage-200);
  --border:        var(--sage-200);
  --border-strong: var(--moss-300);
  --highlight:     var(--amber-500);

  /* ——————————————————————————————————————————
     TYPE — families
     —————————————————————————————————————————— */
  --font-display: 'Fraunces', 'Cormorant Garamond', Georgia, serif;
  --font-text:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', ui-monospace, monospace;

  /* Scale — Perfect Fourth (1.333) */
  --fs-12: 12px;
  --fs-14: 14px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-21: 21px;
  --fs-28: 28px;
  --fs-37: 37px;
  --fs-49: 49px;
  --fs-66: 66px;
  --fs-88: 88px;

  /* ——————————————————————————————————————————
     SPACING — 4px grid
     —————————————————————————————————————————— */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-7:  32px;
  --sp-8:  40px;
  --sp-9:  56px;
  --sp-10: 80px;
  --sp-11: 96px;
  --sp-12: 120px;

  /* ——————————————————————————————————————————
     RADII
     —————————————————————————————————————————— */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-pill: 999px;

  /* ——————————————————————————————————————————
     SHADOWS — warm-tinted
     —————————————————————————————————————————— */
  --shadow-1: 0 1px 2px rgba(26,31,27,0.04), 0 2px 8px rgba(26,31,27,0.04);
  --shadow-2: 0 4px 12px rgba(26,31,27,0.06), 0 12px 32px rgba(26,31,27,0.08);
  --focus-ring: 0 0 0 3px rgba(122,152,133,0.35);

  /* ——————————————————————————————————————————
     MOTION
     —————————————————————————————————————————— */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-micro:  150ms;
  --dur-panel:  280ms;
  --dur-page:   480ms;

  /* Layout */
  --maxw: 1280px;
  --copy-maxw: 62ch;
}

/* ——————————————————————————————————————————
   BASE
   —————————————————————————————————————————— */
html, body {
  background: var(--bg);
  color: var(--fg1);
  font-family: var(--font-text);
  font-size: var(--fs-16);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ——————————————————————————————————————————
   SEMANTIC TYPE CLASSES
   Use these directly: <h1 class="display-1">, <p class="body">, etc.
   —————————————————————————————————————————— */
.display-1, h1.display {
  font-family: var(--font-display);
  font-size: clamp(var(--fs-49), 6vw, var(--fs-88));
  font-weight: 500;
  line-height: 0.98;
  letter-spacing: -0.025em;
  font-variation-settings: "SOFT" 30, "opsz" 144;
  color: var(--fg1);
}
.display-2 {
  font-family: var(--font-display);
  font-size: clamp(var(--fs-37), 4.5vw, var(--fs-66));
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.02em;
  font-variation-settings: "SOFT" 25, "opsz" 144;
}
.h1 {
  font-family: var(--font-display);
  font-size: var(--fs-49);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-variation-settings: "SOFT" 20, "opsz" 72;
}
.h2 {
  font-family: var(--font-display);
  font-size: var(--fs-37);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.015em;
}
.h3 {
  font-family: var(--font-display);
  font-size: var(--fs-28);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.h4 {
  font-family: var(--font-text);
  font-size: var(--fs-21);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.005em;
}
.body-lg {
  font-family: var(--font-text);
  font-size: var(--fs-18);
  line-height: 1.6;
  color: var(--fg1);
}
.body {
  font-family: var(--font-text);
  font-size: var(--fs-16);
  line-height: 1.6;
  color: var(--fg1);
}
.body-sm, .caption {
  font-family: var(--font-text);
  font-size: var(--fs-14);
  line-height: 1.5;
  color: var(--fg2);
}
.eyebrow {
  font-family: var(--font-text);
  font-size: var(--fs-12);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg2);
}
.label {
  font-family: var(--font-text);
  font-size: var(--fs-14);
  font-weight: 500;
  line-height: 1.2;
  color: var(--fg1);
}
.mono {
  font-family: var(--font-mono);
  font-size: var(--fs-14);
  letter-spacing: -0.01em;
}

/* ——————————————————————————————————————————
   BUTTONS — use <button class="btn btn-primary">
   —————————————————————————————————————————— */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  font-family: var(--font-text);
  font-size: var(--fs-16);
  font-weight: 500;
  line-height: 1;
  padding: 14px 22px;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--dur-micro) var(--ease),
              color var(--dur-micro) var(--ease),
              transform var(--dur-micro) var(--ease),
              box-shadow var(--dur-micro) var(--ease);
}
.btn-primary {
  background: var(--accent);
  color: var(--fg-inverse);
}
.btn-primary:hover { background: var(--accent-hover); }
.btn-primary:active { background: var(--accent-press); transform: scale(0.98); }
.btn-secondary {
  background: transparent;
  color: var(--fg1);
  border-color: var(--ink);
}
.btn-secondary:hover { background: rgba(26,31,27,0.04); }
.btn-ghost {
  background: transparent;
  color: var(--fg1);
}
.btn-ghost:hover { background: var(--sage-100); }
.btn-lg { padding: 18px 28px; font-size: var(--fs-18); }
.btn-sm { padding: 10px 16px; font-size: var(--fs-14); }

/* ——————————————————————————————————————————
   FIELDS
   —————————————————————————————————————————— */
.field {
  font-family: var(--font-text);
  font-size: var(--fs-16);
  padding: 14px 16px;
  background: var(--paper);
  color: var(--fg1);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  transition: border-color var(--dur-micro) var(--ease),
              box-shadow var(--dur-micro) var(--ease);
}
.field:focus {
  outline: none;
  border-color: var(--moss-500);
  box-shadow: var(--focus-ring);
}

/* ——————————————————————————————————————————
   CARDS
   —————————————————————————————————————————— */
.card {
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-7);
}
.card-product {
  background: var(--paper);
  border-radius: var(--r-lg);
  padding: var(--sp-7);
  box-shadow: var(--shadow-1);
  transition: box-shadow var(--dur-panel) var(--ease),
              transform var(--dur-panel) var(--ease);
}
.card-product:hover {
  box-shadow: var(--shadow-2);
  transform: translateY(-2px);
}

/* Badges / pills */
.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: var(--sage-200);
  color: var(--cedar-900);
  font-size: var(--fs-12);
  font-weight: 500;
  letter-spacing: 0.02em;
}
.pill-amber { background: var(--amber-200); color: var(--amber-600); }

a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--accent); }


/* ——————————————————————————————————————————
   RESPONSIVE UTILITIES
   Mobile-first. Use with inline style for customization.
   —————————————————————————————————————————— */

/* Grid presets — 2 and 3 col desktop grids that stack on mobile */
.grid-2 { display: grid; grid-template-columns: 1fr; gap: 22px; }
.grid-3 { display: grid; grid-template-columns: 1fr; gap: 22px; }
.grid-4 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.grid-hero { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; }
.grid-pdp  { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: start; }
.grid-footer { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.stack-mobile { flex-wrap: wrap; }

/* Tablet and up */
@media (min-width: 720px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .grid-3 { grid-template-columns: repeat(3, 1fr); gap: 22px; }
  .grid-4 { grid-template-columns: repeat(4, 1fr); gap: 24px; }
  .grid-footer { grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr; gap: 40px; }
}

/* Desktop */
@media (min-width: 960px) {
  .grid-hero { grid-template-columns: 1.05fr 1fr; gap: 64px; }
  .grid-pdp  { grid-template-columns: 1.1fr 1fr; gap: 56px; }
}

/* Responsive padding utility */
.section-pad { padding-left: 20px; padding-right: 20px; }
@media (min-width: 720px) { .section-pad { padding-left: 32px; padding-right: 32px; } }

/* Mobile: smaller section padding y */
.sec-y { padding-top: 64px; padding-bottom: 64px; }
@media (min-width: 720px) { .sec-y { padding-top: 96px; padding-bottom: 96px; } }
@media (min-width: 960px) { .sec-y { padding-top: 112px; padding-bottom: 112px; } }

/* Mobile-only / desktop-only visibility */
.only-mobile  { display: block; }
.only-desktop { display: none; }
@media (min-width: 960px) {
  .only-mobile  { display: none !important; }
  .only-desktop { display: block !important; }
}

/* Mobile nav refinements */
@media (max-width: 720px) {
  .nav-desktop { display: none !important; }
  .hero-padding { padding: 24px 20px 64px !important; }
  .display-1, h1.display { font-size: clamp(40px, 10vw, 64px) !important; line-height: 1.05 !important; }
  .h1 { font-size: clamp(32px, 8vw, 44px) !important; }
  .h2 { font-size: clamp(26px, 6.5vw, 36px) !important; }
  .press-strip span { font-size: 16px !important; }
  .btn-lg { padding: 14px 20px !important; font-size: 15px !important; }
}

/* Fix for sticky PDP buy card — only sticky on desktop */
.buy-card-sticky { position: relative; top: auto; }
@media (min-width: 960px) {
  .buy-card-sticky { position: sticky; top: 100px; }
}