/* ============================================================
   XTOPIA — Design Tokens
   ============================================================ */
:root {
  /* Core */
  --c-void:        #111010;   /* Near-black — primary background */
  --c-charcoal:    #1A1919;   /* Slightly lighter dark panels */
  /* --color-cream moved to brand palette */   /* Primary text / accent on dark */
  --color-cream-dim:   #C8C5BC;   /* Secondary text on dark */

  /* Brand palette */
  --color-sage:        #c1c6a3;
  --color-dark-olive:  #4f5438;
  --color-light-blue:  #bfd4dd;
  --color-navy:        #00263e;
  --color-maroon:      #350004;
  --color-cream:       #efede3;

  /* October 2026 profile — surface tokens */
  --color-cream-warm:  #F6F0E4;  /* profile page background (sampled) — main light surface */
  --color-sand:        #E4DBCC;  /* cards / secondary light surface */
  --color-taupe:        #9D8A75;  /* decorative rules/dividers on light — not for text (fails WCAG AA on cream) */
  --color-taupe-text:   #5C4B3A;  /* darkened taupe for labels/secondary text on light — passes 4.5:1 on cream */
  --surface-light:     var(--color-cream-warm);
  --surface-dark:      #000000;  /* profile uses true black */
  --text-on-light:     #2E2E2E;  /* profile body text on cream */
  --text-on-dark:      #FFFBF7;  /* profile text on black */
  --accent-number:        var(--color-navy);        /* stat numbers on light (profile: #00263E) */
  --accent-number-dark:   var(--color-light-blue);  /* stat numbers + small caps labels on dark (profile: #BFD4DD) */
  --accent-italic:        var(--color-maroon);      /* italic taglines on light */

  /* UI */
  --c-line:        rgba(240, 237, 227, 0.12);
  --c-line-bright: rgba(240, 237, 227, 0.35);
  --c-overlay:     rgba(17, 16, 16, 0.72);

  /* Gradients */
  --g-fade-up:   linear-gradient(to top, var(--c-void) 0%, transparent 100%);
  --g-fade-down: linear-gradient(to bottom, var(--c-void) 0%, transparent 100%);

  /* Spacing scale */
  --space-xs:   0.5rem;
  --space-sm:   1rem;
  --space-md:   2rem;
  --space-lg:   4rem;
  --space-xl:   8rem;
  --space-2xl: 12rem;

  /* Layout */
  --gutter:      clamp(1.25rem, 5vw, 6rem);
  --max-width:   1680px;
  --nav-height:  84px;

  /* Motion */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:    0.35s;
  --dur-med:     0.6s;
  --dur-slow:    1s;

  /* Z-index scale */
  --z-grid:     0;
  --z-content:  1;
  --z-nav:      80;
  --z-progress: 85;
  --z-cursor:   90;
  --z-overlay:  95;
  --z-loader:   100;
}