/* ============================================================
   STONEMOSS GARDEN CO. — DESIGN TOKEN SYSTEM
   Industrial Skeuomorphism · Aged Copper · Weathered Concrete
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;0,900;1,400;1,600&family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Josefin+Slab:wght@300;400;600;700&display=swap');

:root {

  /* ── PALETTE ── */
  --concrete:       #2C2A26;
  --concrete-deep:  #1A1916;
  --concrete-mid:   #35322D;
  --concrete-soft:  #3E3B35;
  --concrete-pale:  #4A4740;

  --plaster:        #EDE8DF;
  --plaster-warm:   #F5F0E8;
  --plaster-cool:   #E4DED4;
  --plaster-dark:   #C8C0B0;

  --copper:         #B87333;
  --copper-bright:  #D4894A;
  --copper-aged:    #8B6344;
  --copper-green:   #4A7C6B;
  --copper-glow:    rgba(184,115,51,0.25);
  --copper-rim:     rgba(184,115,51,0.40);

  --rust:           #8B3A1F;
  --rust-bright:    #A84822;
  --rust-pale:      rgba(139,58,31,0.15);

  --moss:           #5C7A3E;
  --moss-bright:    #6E9147;
  --moss-pale:      rgba(92,122,62,0.15);
  --moss-dark:      #3D5229;

  --stone:          #7A7468;
  --stone-light:    #9C9588;
  --stone-pale:     rgba(122,116,104,0.20);

  --clay:           #9E6B4A;
  --sand:           #C4A882;
  --soil:           #5A4232;

  --cream:          #F8F4EC;
  --ink:            #1C1A17;

  /* ── TEXT ── */
  --text:           #2C2A26;
  --text-warm:      #1C1A17;
  --text-mid:       #4A4740;
  --text-muted:     #7A7468;
  --text-faint:     #9C9588;
  --text-ghost:     rgba(44,42,38,0.25);
  --text-on-dark:   #EDE8DF;
  --text-on-dark-dim: rgba(237,232,223,0.70);

  /* ── TYPOGRAPHY ── */
  --font-display: 'Playfair Display', 'Georgia', serif;
  --font-body:    'Libre Baskerville', 'Georgia', serif;
  --font-label:   'Josefin Slab', 'Georgia', serif;

  /* Sizes */
  --fs-2xs: 0.65rem;
  --fs-xs:  0.78rem;
  --fs-sm:  0.90rem;
  --fs-base:1.00rem;
  --fs-md:  1.10rem;
  --fs-lg:  1.30rem;
  --fs-xl:  1.65rem;
  --fs-2xl: 2.10rem;
  --fs-3xl: 2.80rem;
  --fs-4xl: 3.80rem;
  --fs-5xl: 5.20rem;

  /* Line heights */
  --lh-tight:  1.1;
  --lh-snug:   1.3;
  --lh-body:   1.75;
  --lh-loose:  1.95;

  /* Letter spacing */
  --ls-tight:  -0.02em;
  --ls-normal:  0;
  --ls-wide:    0.06em;
  --ls-wider:   0.12em;
  --ls-widest:  0.22em;
  --ls-label:   0.15em;

  /* ── SPACING ── */
  --sp-1:   0.25rem;  --sp-2:  0.50rem;  --sp-3:  0.75rem;
  --sp-4:   1.00rem;  --sp-5:  1.25rem;  --sp-6:  1.50rem;
  --sp-8:   2.00rem;  --sp-10: 2.50rem;  --sp-12: 3.00rem;
  --sp-16:  4.00rem;  --sp-20: 5.00rem;  --sp-24: 6.00rem;
  --sp-32:  8.00rem;  --sp-40:10.00rem;

  /* ── LAYOUT ── */
  --max-w:    1260px;
  --max-w-md:  880px;
  --max-w-sm:  640px;
  --gutter:    clamp(1.25rem, 4vw, 2.5rem);

  /* ── BORDERS (riveted industrial) ── */
  --b-copper:   1px solid var(--copper-rim);
  --b-copper-2: 2px solid var(--copper);
  --b-stone:    1px solid rgba(122,116,104,0.30);
  --b-dark:     1px solid rgba(28,26,23,0.30);
  --b-plaster:  1px solid rgba(237,232,223,0.20);

  /* ── SHADOWS ── */
  --sh-copper:  0 0 20px var(--copper-glow), 0 4px 16px rgba(0,0,0,0.20);
  --sh-card:    0 8px 32px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.06);
  --sh-deep:    0 20px 60px rgba(0,0,0,0.35);
  --sh-inset:   inset 0 2px 6px rgba(0,0,0,0.25), inset 0 1px 2px rgba(0,0,0,0.15);
  --sh-emboss:  0 1px 0 rgba(255,255,255,0.12), 0 -1px 0 rgba(0,0,0,0.20);

  /* ── TEXTURES ── */
  --tex-concrete: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.055'/%3E%3C/svg%3E");
  --tex-paper:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23p)' opacity='0.04'/%3E%3C/svg%3E");

  /* ── MOTION ── */
  --ease:      cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-out:  cubic-bezier(0.0, 0.0, 0.2, 1.0);
  --dur-fast:  0.18s;
  --dur-mid:   0.35s;
  --dur-slow:  0.60s;

  /* ── Z-INDEX ── */
  --z-bg:    -1;  --z-base:  1;  --z-up:  10;
  --z-modal: 200; --z-nav:  300;
}