/* ============================================
   ORCHIDERY – Design Tokens
   ============================================ */

:root {
  /* ── Colors ── */
  --color-bg:            #FAFAF8;
  --color-bg-alt:        #F3F1ED;
  --color-surface:       #FFFFFF;
  --color-text:          #2C2C2C;
  --color-text-light:    #6B6B6B;
  --color-text-muted:    #8A8A8A;
  --color-border:        #E5E2DC;
  --color-border-light:  #F0EDE8;

  /* Accent – Orchid Pink */
  --color-primary:       #D4618C;
  --color-primary-dark:  #B84A73;
  --color-primary-light: #F2D5E0;
  --color-primary-bg:    #FDF5F8;

  /* Secondary – Natural Green */
  --color-secondary:     #5B8C5A;
  --color-secondary-dark:#477347;
  --color-secondary-light:#D7E8D6;

  /* Utility */
  --color-success:       #5B8C5A;
  --color-warning:       #D4A03C;
  --color-error:         #C44D4D;
  --color-overlay:       rgba(20, 20, 20, 0.65);

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

  --fs-xs:    0.75rem;    /* 12px */
  --fs-sm:    0.875rem;   /* 14px */
  --fs-base:  1rem;       /* 16px */
  --fs-md:    1.125rem;   /* 18px */
  --fs-lg:    1.25rem;    /* 20px */
  --fs-xl:    1.5rem;     /* 24px */
  --fs-2xl:   2rem;       /* 32px */
  --fs-3xl:   2.5rem;     /* 40px */
  --fs-4xl:   3.25rem;    /* 52px */
  --fs-hero:  4rem;       /* 64px */

  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;

  --lh-tight:    1.2;
  --lh-normal:   1.6;
  --lh-loose:    1.8;

  --ls-tight:   -0.02em;
  --ls-normal:   0;
  --ls-wide:     0.05em;
  --ls-wider:    0.1em;

  /* ── Spacing (4px grid) ── */
  --space-1:  0.25rem;   /* 4px  */
  --space-2:  0.5rem;    /* 8px  */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.25rem;   /* 20px */
  --space-6:  1.5rem;    /* 24px */
  --space-8:  2rem;      /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */
  --space-20: 5rem;      /* 80px */
  --space-24: 6rem;      /* 96px */
  --space-32: 8rem;      /* 128px */

  /* ── Layout ── */
  --max-width:       1280px;
  --max-width-narrow: 900px;
  --max-width-wide:  1440px;
  --header-height:   72px;
  --header-height-scrolled: 60px;

  /* ── Borders ── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-full: 9999px;

  /* ── Shadows ── */
  --shadow-xs:  0 1px 2px rgba(0,0,0,0.04);
  --shadow-sm:  0 2px 8px rgba(0,0,0,0.06);
  --shadow-md:  0 4px 16px rgba(0,0,0,0.08);
  --shadow-lg:  0 8px 32px rgba(0,0,0,0.10);
  --shadow-xl:  0 16px 48px rgba(0,0,0,0.12);

  /* ── Transitions ── */
  --ease-out:    cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-in-out: cubic-bezier(0.42, 0, 0.58, 1);
  --duration-fast:   150ms;
  --duration-normal: 300ms;
  --duration-slow:   500ms;

  /* ── Z-index scale ── */
  --z-dropdown:  100;
  --z-sticky:    200;
  --z-overlay:   300;
  --z-modal:     400;
  --z-toast:     500;
}