/* ==========================================================================
   Design Tokens — Open State
   ========================================================================== */

:root {
  /* Colors — new light/white palette with Dia-inspired accents */
  --color-hero-bg:      #f7f7f7;
  --color-hero-bg-dark: #f3f3f3;
  --color-page-bg:      #ffffff;
  --color-text:         #1a1a1a;
  --color-text-light:   #555555;
  --color-deep-blue:    #1a3a6a;
  --color-light-purple: #9b7ec8;
  --color-rust:         #c4653a;
  --color-white:        #ffffff;
  --color-border:       #e0e0e0;

  /* Glow colors (for Dia-style hero edge blobs) */
  --glow-orange:  rgba(196, 101, 58, 0.15);
  --glow-purple:  rgba(155, 126, 200, 0.12);
  --glow-blue:    rgba(26, 58, 106, 0.10);

  /* Page-wide ambient glows (softer — used behind narrative/about/footer) */
  --glow-orange-soft: rgba(196, 101, 58, 0.09);
  --glow-purple-soft: rgba(155, 126, 200, 0.08);
  --glow-blue-soft:   rgba(26, 58, 106, 0.07);

  /* Typography */
  --font-headline: 'Inter', -apple-system, sans-serif;
  --font-body:     'IBM Plex Mono', 'Courier New', monospace;
  --tracking-tight: -0.02em;
  --tracking-caps:   0.12em;

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

  /* Animation timing */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-reveal: 0.8s;
  --duration-hover:  0.25s;
  --duration-video-fade: 1.5s;

  /* Layout */
  --content-width: 42rem;
  --content-width-wide: 64rem;
}