/* ============================================================
   Woodsland Visual System — base tokens
   For premium ecommerce product visualization (Amazon, A+)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Marcellus&family=DM+Serif+Display:ital@0;1&family=Montserrat:wght@300;400;500;600;700&family=Bricolage+Grotesque:opsz,wght@12..96,300;12..96,400;12..96,500;12..96,600;12..96,700&display=swap');

:root {
  /* Neutrals — studio whites & paper */
  --paper:           #FFFFFF;   /* Amazon-compliant pure white */
  --paper-warm:      #FBF8F3;   /* cream / off-white backdrop  */
  --paper-stone:     #F2EFE9;   /* soft studio gradient base   */
  --paper-sand:      #E9E3D7;   /* lower-half gradient tone    */
  --hairline:        #E6E1D6;
  --hairline-strong: #D6CFC0;

  /* Wood — warm browns drawn from acacia product palette */
  --wood-50:         #F2E6D5;
  --wood-100:        #E3CBA6;
  --wood-200:        #C99A65;
  --wood-300:        #A66B3D;   /* primary brand wood */
  --wood-400:        #7A4A28;
  --wood-500:        #4F2F1B;
  --walnut:          #2A1B0F;   /* near-black, warm */

  /* Foreground & ink */
  --ink:             #1A140E;
  --ink-2:           #4A3F33;
  --ink-3:           #7A6F62;
  --ink-mute:        #A89A88;

  /* Accents */
  --accent-leaf:     #5B6B3A;   /* matte olive — used sparingly */
  --accent-clay:     #B65A3C;   /* warm terracotta — CTA only  */

  /* Shadow tokens — realistic studio contact */
  --shadow-contact:  0 14px 28px -10px rgba(40, 24, 12, 0.18),
                     0  4px 10px -4px  rgba(40, 24, 12, 0.10);
  --shadow-hover:    0 22px 44px -14px rgba(40, 24, 12, 0.22),
                     0  6px 14px -6px  rgba(40, 24, 12, 0.12);
  --shadow-soft:     0 1px 2px rgba(40, 24, 12, 0.04),
                     0 8px 24px -8px rgba(40, 24, 12, 0.10);

  /* Radii */
  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 14px;
  --r-xl: 24px;
  --r-pill: 999px;

  /* Spacing scale (8pt) */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;

  /* Type families
     ------------------------------------------------------------
     --font-display  → Marcellus           (h1, h2 hero/section heads)
     --font-subhead  → DM Serif Display    (h3 card titles, subheadings, em italics)
     --font-sans     → Montserrat          (body, nav, buttons, inputs)
     --font-accent   → Bricolage Grotesque (eyebrows, stats, numerals, tags) */
  --font-display: 'Marcellus', 'Times New Roman', serif;
  --font-subhead: 'DM Serif Display', 'Times New Roman', serif;
  --font-sans:    'Montserrat', -apple-system, 'Segoe UI', system-ui, sans-serif;
  --font-accent:  'Bricolage Grotesque', 'Montserrat', system-ui, sans-serif;

  /* Type roles (px sizing tuned for 1:1 1600px hero artboards) */
  --t-hero:        clamp(56px, 6.5vw, 120px);
  --t-display:     clamp(40px, 4.6vw, 80px);
  --t-h1:          44px;
  --t-h2:          32px;
  --t-h3:          24px;
  --t-lead:        20px;
  --t-body:        16px;
  --t-caption:     13px;
  --t-eyebrow:     12px;

  /* Letter spacing */
  --ls-tight:  -0.02em;
  --ls-normal:  0;
  --ls-wide:    0.06em;
  --ls-xwide:   0.18em;  /* eyebrow caps */
}

/* Semantic styles ------------------------------------------- */
.eyebrow {
  font-family: var(--font-accent);
  font-size: var(--t-eyebrow);
  font-weight: 600;
  letter-spacing: var(--ls-xwide);
  text-transform: uppercase;
  color: var(--ink-3);
}
.h1, .display {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: var(--ls-tight);
  line-height: 1.05;
  color: var(--ink);
}
.h2 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: var(--ls-tight);
  line-height: 1.08;
  color: var(--ink);
}
.h3 {
  font-family: var(--font-subhead);
  font-weight: 400;
  letter-spacing: -0.005em;
  color: var(--ink);
}
.lead {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--t-lead);
  color: var(--ink-2);
  line-height: 1.45;
}
.body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--t-body);
  color: var(--ink-2);
  line-height: 1.55;
}
.caption {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--t-caption);
  color: var(--ink-3);
  letter-spacing: 0.02em;
}

/* Studio surfaces ------------------------------------------- */
.surface-paper       { background: var(--paper); }
.surface-warm        { background: var(--paper-warm); }
.surface-studio-grad {
  background:
    radial-gradient(ellipse 80% 70% at 50% 40%, #FFFFFF 0%, #F9F5EE 55%, #ECE4D4 100%);
}
.surface-floor-grad {
  background:
    linear-gradient(180deg, #FFFFFF 0%, #FAF6EE 55%, #E6DDCB 100%);
}