/* ==========================================================================
   SpaceSavvyLiving — Design Tokens
   A warm, editorial design system inspired by Apartment Therapy & Studio McGee.
   ========================================================================== */

:root {
  /* ── Colors ──────────────────────────────────────────────────────────── */
  --color-bg:             #FCFBF8;
  --color-primary:        #EDE6DE;
  --color-accent:         #A8B7A0;
  --color-accent-light:   #C8D4C2;
  --color-accent-dark:    #8FA487;
  --color-text:           #2E2E2E;
  --color-text-secondary: #707070;
  --color-text-light:     #999999;
  --color-btn:            #C49A6C;
  --color-btn-hover:      #A8B7A0;
  --color-border:         #E8E3DC;
  --color-card-bg:        #FFFFFF;
  --color-overlay:        rgba(0, 0, 0, 0.3);

  /* ── Typography ──────────────────────────────────────────────────────── */
  --font-heading: 'Playfair Display', Georgia, serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --fs-h1: clamp(2rem, 5vw, 3rem);
  --fs-h2: clamp(1.5rem, 4vw, 2.25rem);
  --fs-h3: 1.5rem;
  --fs-h4: 1.25rem;
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-xs: 0.75rem;

  --lh-body:    1.7;
  --lh-heading: 1.3;

  --ls-heading: -0.02em;

  /* ── Spacing ─────────────────────────────────────────────────────────── */
  --space-xs:      0.25rem;   /*  4px */
  --space-sm:      0.5rem;    /*  8px */
  --space-md:      1rem;      /* 16px */
  --space-lg:      1.5rem;    /* 24px */
  --space-xl:      2rem;      /* 32px */
  --space-2xl:     3rem;      /* 48px */
  --space-3xl:     4rem;      /* 64px */
  --space-4xl:     6rem;      /* 96px */
  --space-section: 5rem;      /* 80px */

  /* ── Border Radius ───────────────────────────────────────────────────── */
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-full: 9999px;

  /* ── Shadows ─────────────────────────────────────────────────────────── */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.1);

  /* ── Transitions ─────────────────────────────────────────────────────── */
  --transition-fast: 0.2s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.5s ease;

  /* ── Layout ──────────────────────────────────────────────────────────── */
  --max-width:         1200px;
  --max-width-article: 760px;
  --navbar-height:     70px;
}