/* ===========================================================
   DESIGN TOKENS — Verdant Goods
   Warm, natural, Montessori-inspired: walnut wood, sage,
   cream paper. Minimal ornament, generous space.
=========================================================== */
:root {
  /* --- Brand palette (source of truth) --- */
  --brand-walnut:      #6B4226;  /* Primary Walnut Brown */
  --brand-wood:        #9A623C;  /* Warm Wood */
  --brand-sage:        #7D9565;  /* Sage Green */
  --brand-olive:       #4F633E;  /* Deep Olive */
  --brand-cream:       #F8F4EC;  /* Warm Cream */
  --brand-beige:       #EFE7D8;  /* Soft Beige */
  --brand-ivory:       #FFFDF8;  /* Ivory */
  --brand-charcoal:    #2F2924;  /* Charcoal Brown */
  --brand-muted:       #75695F;  /* Muted Brown */
  --brand-light-beige: #DDD2C2;  /* Light Beige */
  --brand-terracotta:  #B87545;  /* Terracotta */

  /* --- Translucent washes derived from the palette --- */
  --wash-sage:       rgba(125, 149, 101, 0.18);
  --wash-olive:      rgba(79, 99, 62, 0.16);
  --wash-wood:       rgba(154, 98, 60, 0.14);
  --wash-terracotta: rgba(184, 117, 69, 0.16);
  --wash-walnut:     rgba(107, 66, 38, 0.10);
  --wash-light:      rgba(255, 253, 248, 0.14);
  --wash-line:       rgba(255, 253, 248, 0.18);
  --scrim:           rgba(47, 41, 36, 0.52);

  /* --- Semantic roles --- */
  --color-primary:      var(--brand-walnut);     /* buttons, branding */
  --color-primary-deep: var(--brand-charcoal);   /* deepest surfaces + hovers */
  --color-secondary:    var(--brand-olive);      /* accent text that must read */
  --color-sage:         var(--brand-sage);       /* subtle accents, fills */
  --color-accent:       var(--brand-terracotta); /* offers, highlights — sparingly */
  --color-gold:         var(--brand-wood);
  --color-brown:        var(--brand-wood);
  --color-neutral:      var(--brand-charcoal);

  --color-bg:        var(--brand-cream);   /* page background */
  --color-bg-off:    var(--brand-ivory);   /* header, cards, panels */
  --color-surface:   var(--brand-ivory);
  --color-surface-2: var(--brand-beige);
  --color-mint:      var(--brand-beige);   /* subtle fill / light-on-dark text */

  --color-text:        var(--brand-charcoal);
  --color-text-muted:  var(--brand-muted);
  --color-heading:     var(--brand-walnut);
  --color-border:      var(--brand-light-beige);
  --color-border-soft: var(--brand-beige);

  /* Foreground pairs — keeps contrast predictable */
  --color-on-primary: var(--brand-ivory);
  --color-on-accent:  #241A12;  /* deepened charcoal — keeps 4.6:1 on terracotta */
  --color-on-dark:    var(--brand-beige);

  --color-success: var(--brand-olive);
  --color-danger:  #A94B34;       /* warm brick — reserved for destructive UI */
  --color-focus:   var(--brand-walnut);

  /* --- Typography --- */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;

  /* Fluid scale — no layout jumps between breakpoints */
  --fs-xs:   0.75rem;
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --fs-md:   clamp(1.0625rem, 1.02rem + 0.2vw, 1.125rem);
  --fs-lg:   clamp(1.1875rem, 1.11rem + 0.38vw, 1.375rem);
  --fs-xl:   clamp(1.375rem, 1.2rem + 0.85vw, 1.875rem);
  --fs-2xl:  clamp(1.75rem, 1.44rem + 1.5vw, 2.5rem);
  --fs-3xl:  clamp(2.125rem, 1.6rem + 2.6vw, 3.25rem);

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

  /* --- Layout --- */
  --container-max: 1240px;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  --tap: 44px; /* minimum comfortable touch target */

  /* --- Effects --- */
  --shadow-sm: 0 1px 3px rgba(47, 41, 36, 0.07);
  --shadow-md: 0 6px 20px rgba(47, 41, 36, 0.10);
  --shadow-lg: 0 16px 40px rgba(47, 41, 36, 0.16);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --header-h: 76px;
}

@media (max-width: 768px) {
  :root { --header-h: 64px; }
}