/* ==========================================================================
   TRIBE — Design Tokens / CSS Custom Properties
   ========================================================================== */
:root {
  /* Brand colors (from TRIBE logo) */
  --color-black: #121212;
  --color-black-soft: #1c1c1c;
  --color-white: #ffffff;
  --color-off-white: #fbfaf8;
  --color-beige: #f4ede3;
  --color-beige-dark: #e8dcc8;
  --color-beige-deep: #d9c8a9;
  --color-gold: #c6a15b;
  --color-gold-light: #e0c48c;
  --color-gold-dark: #a3813f;
  --color-gray: #6f6a63;
  --color-gray-light: #9c968c;
  --color-line: #e6ddd0;
  --color-error: #b3453d;
  --color-success: #5c7a52;

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

  /* Spacing scale */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;
  --space-3xl: 9rem;

  /* Layout */
  --max-width: 1440px;
  --container-padding: clamp(1.25rem, 4vw, 4rem);
  --header-height: 84px;
  --header-height-scrolled: 68px;

  /* Motion */
  --ease-luxury: cubic-bezier(0.22, 1, 0.36, 1);
  --transition-fast: 0.25s var(--ease-luxury);
  --transition-medium: 0.5s var(--ease-luxury);
  --transition-slow: 0.9s var(--ease-luxury);

  /* Shadows */
  --shadow-soft: 0 10px 40px rgba(18, 18, 18, 0.06);
  --shadow-medium: 0 20px 60px rgba(18, 18, 18, 0.1);
  --shadow-gold: 0 10px 30px rgba(198, 161, 91, 0.25);

  /* Z-index */
  --z-header: 500;
  --z-drawer: 900;
  --z-modal: 1000;
  --z-toast: 1100;
}