/* ============================================================
   DREAM SPACE DESIGN STUDIO — DESIGN SYSTEM VARIABLES
   Strict 5-Color System & 2-Font Family Enforcement
   ============================================================ */

:root {
  /* OFFICIAL COLOR SYSTEM */
  --color-teal: #0E5558;        /* Primary brand/environment color */
  --color-gold: #C99A32;        /* Restrained luxury accent */
  --color-ivory: #F4EBDD;       /* Warm light editorial background */
  --color-slate: #555D60;       /* Secondary UI, borders, metadata */
  --color-charcoal: #1C1B19;    /* Deep cinematic dark sections */

  /* ALPHA & DERIVED VARIANTS (STRICTLY FROM OFFICIAL PALETTE) */
  --color-teal-dark: #083739;
  --color-teal-glow: rgba(14, 85, 88, 0.18);
  --color-teal-overlay: rgba(14, 85, 88, 0.45);
  
  --color-gold-muted: rgba(201, 154, 50, 0.35);
  --color-gold-glow: rgba(201, 154, 50, 0.15);
  --color-gold-hover: #d8a83d;

  --color-ivory-dim: #e8ded0;
  --color-ivory-glow: rgba(244, 235, 221, 0.08);

  --color-slate-light: #7b8487;
  --color-slate-dark: #3b4143;
  --color-border-light: rgba(244, 235, 221, 0.14);
  --color-border-dark: rgba(28, 27, 25, 0.12);

  --color-charcoal-pure: #131210;
  --color-charcoal-surface: #252422;

  /* STRICT TYPOGRAPHY — SORA & INTER ONLY */
  --font-display: 'Sora', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* ARCHITECTURAL SPACING SCALE */
  --space-3xs: 0.25rem;   /* 4px */
  --space-2xs: 0.5rem;    /* 8px */
  --space-xs: 0.75rem;    /* 12px */
  --space-sm: 1rem;       /* 16px */
  --space-md: 1.5rem;     /* 24px */
  --space-lg: 2.25rem;    /* 36px */
  --space-xl: 3.5rem;     /* 56px */
  --space-2xl: 5rem;      /* 80px */
  --space-3xl: 7.5rem;    /* 120px */
  --space-4xl: 10rem;     /* 160px */

  /* GRID & LAYOUT */
  --container-max: 1680px;
  --container-editorial: 1360px;
  --container-narrow: 1020px;
  --gutter: clamp(1.25rem, 4vw, 4rem);

  /* TRANSITIONS & EASINGS */
  --ease-architectural: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-smooth: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  
  --duration-fast: 0.25s;
  --duration-normal: 0.5s;
  --duration-slow: 0.85s;
  --duration-cinematic: 1.4s;

  /* HEADER & CURSOR */
  --header-height: 96px;
  --z-base: 1;
  --z-nav: 50;
  --z-modal: 100;
  --z-preloader: 1000;
  --z-cursor: 9999;
}