/* ============================================
   AJ Properties — Design Tokens
   ============================================ */

:root {
  /* ── Colors ── */
  --color-primary:       #1a1a2e;
  --color-primary-rgb:   26, 26, 46;
  --color-secondary:     #16213e;
  --color-accent:        #b8860b;
  --color-accent-light:  #c9a84c;
  --color-accent-rgb:    184, 134, 11;

  --color-bg:            #faf8f5;
  --color-bg-alt:        #f0ede8;
  --color-surface:       #ffffff;
  --color-surface-warm:  #f5f0ea;

  --color-text:          #2c2c2c;
  --color-text-heading:  #1a1a2e;
  --color-text-muted:    #6b6b6b;
  --color-text-light:    #999999;
  --color-text-on-dark:  #faf8f5;
  --color-text-on-accent:#1a1a2e;

  --color-border:        #e0dcd6;
  --color-border-light:  #eae6e0;

  /* ── Typography ── */
  --font-heading:  'Playfair Display', 'Georgia', serif;
  --font-body:     'Inter', 'Helvetica Neue', 'Arial', sans-serif;

  --text-xs:    0.75rem;     /* 12px */
  --text-sm:    0.875rem;    /* 14px */
  --text-base:  1rem;        /* 16px */
  --text-md:    1.125rem;    /* 18px */
  --text-lg:    1.25rem;     /* 20px */
  --text-xl:    1.5rem;      /* 24px */
  --text-2xl:   2rem;        /* 32px */
  --text-3xl:   2.5rem;      /* 40px */
  --text-4xl:   3rem;        /* 48px */
  --text-5xl:   3.75rem;     /* 60px */
  --text-6xl:   4.5rem;      /* 72px */

  --leading-tight:   1.2;
  --leading-snug:    1.35;
  --leading-normal:  1.6;
  --leading-relaxed: 1.75;

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

  /* ── Spacing (4px base) ── */
  --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 ── */
  --container-max:     1200px;
  --container-narrow:  900px;
  --container-wide:    1400px;

  /* ── Borders & Radius ── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --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);
  --shadow-card: 0 2px 20px rgba(0, 0, 0, 0.06);

  /* ── Transitions ── */
  --ease-out:     cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-in-out:  cubic-bezier(0.645, 0.045, 0.355, 1);
  --duration-fast:   200ms;
  --duration-normal: 350ms;
  --duration-slow:   600ms;

  /* ── Z-Index ── */
  --z-nav:      1000;
  --z-overlay:  900;
  --z-modal:    1100;
}