/* ==========================================================================
   JEWEL DESIGN STUDIO — DESIGN TOKENS (Layer 1)
   All visual primitives. Every element and component references these tokens.
   Updating a token here cascades across the entire site.
   ========================================================================== */

:root {
  /* ---- Colour tokens ---- */
  --colour-primary:         #501c28;
  --colour-background:      #f2eae0;
  --colour-background-deep: #3a1219;
  --colour-accent-1:        #afc3c8; /* Dusty Blue */
  --colour-accent-2:        #fa6237; /* Burnt Orange */
  --colour-text-body:       #3d1a20;
  --colour-divider:         #501c28;
  --colour-input-bg:        #faf7f2; /* Warm off-white for form fields */
  --colour-background-warm: #ede4d9; /* Slightly deeper cream for contrast sections */
  --colour-focus:           #afc3c8; /* Dusty Blue — used for keyboard focus rings */

  /* ---- Typography tokens ---- */
  --font-display: 'Playfair Display', serif;
  --font-serif:   'Playfair Display', serif;
  --font-body:    'Space Grotesk', sans-serif;

  /* ---- Spacing tokens (8pt grid) ---- */
  --space-xs:  8px;
  --space-sm:  16px;
  --space-md:  32px;
  --space-lg:  64px;
  --space-xl:  96px;
  --space-2xl: 128px;

  /* ---- Layout tokens ---- */
  --max-content-width: 1280px;
  --column-gutter:     32px;
  --section-padding:   96px;
  --section-padding-mobile: 48px;

  /* ---- Transition tokens ---- */
  --transition-fast:   200ms ease;
  --transition-medium: 300ms ease;
  --transition-slow:   400ms ease;

  /* ---- Border tokens ---- */
  --border-radius: 0px; /* Square — premium feel */
}