/* ============================================================
   404AVENUE — DESIGN SYSTEM
   Direction : Chalk & Rust
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,700;0,900;1,400;1,700&family=Syne:wght@400;500;600;700;800&family=DM+Sans:ital,wght@0,300;0,400;0,500;1,300&display=swap');

:root {
  /* ── Palette ── */
  --cream:       #F7F2EB;
  --cream-dark:  #EDE8DF;
  --cream-deep:  #E0D9CE;
  --black:       #1A1A1A;
  --black-soft:  #2C2C2C;
  --grey-mid:    #8A8680;
  --grey-light:  #C4BFB8;
  --rust:        #D85A30;
  --rust-dark:   #B84820;
  --rust-light:  #F0A080;
  --rust-pale:   #FAE8E0;
  --white:       #FDFAF6;

  /* ── Typography ── */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-sans:    'Syne', sans-serif;
  --font-body:    'DM Sans', sans-serif;

  /* ── Spacing scale ── */
  --s1:  0.5rem;
  --s2:  1rem;
  --s3:  1.5rem;
  --s4:  2rem;
  --s5:  3rem;
  --s6:  5rem;
  --s7:  8rem;

  /* ── Layout ── */
  --max-w:       1200px;
  --nav-h:       72px;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;

  /* ── Transitions ── */
  --ease:        cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-out:    cubic-bezier(0.0, 0.0, 0.2, 1);
  --dur-fast:    0.15s;
  --dur-mid:     0.3s;
  --dur-slow:    0.6s;

  /* ── Shadows ── */
  --shadow-sm:   0 1px 3px rgba(26,26,26,0.08);
  --shadow-md:   0 4px 16px rgba(26,26,26,0.10);
  --shadow-lg:   0 12px 40px rgba(26,26,26,0.14);
}