/* ==========================================================================
   MiGoGraphy - Design System Tokens
   ========================================================================== */

:root {
  /* Color Palette - Verified against master artwork */
  --migo-yellow: #F8BB1C;
  --migo-yellow-rgb: 248, 187, 28;
  --ink: #080808;
  --ink-rgb: 8, 8, 8;
  --muted-ink: #1F1F1F;
  --dark-surface: #121212;
  --paper: #F4F1EA;
  --paper-rgb: 244, 241, 234;
  --paper-muted: #D8D4CA;
  --white: #FFFFFF;
  --white-rgb: 255, 255, 255;
  
  /* Semantic Border Tokens */
  --border-on-dark: rgba(255, 255, 255, 0.12);
  --border-on-dark-strong: rgba(255, 255, 255, 0.25);
  --border-on-light: rgba(8, 8, 8, 0.12);
  --border-on-yellow: rgba(8, 8, 8, 0.18);
  --border-accent: rgba(248, 187, 28, 0.4);

  /* Typography Stacks */
  --font-display: 'Syne', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-arabic: 'Alexandria', 'Syne', sans-serif;
  --font-mono: 'Courier New', Courier, monospace;

  /* Fluid Spacing System */
  --space-3xs: clamp(0.25rem, 0.2vw + 0.2rem, 0.375rem);
  --space-2xs: clamp(0.5rem, 0.4vw + 0.4rem, 0.75rem);
  --space-xs:  clamp(0.75rem, 0.6vw + 0.6rem, 1rem);
  --space-s:   clamp(1rem, 0.8vw + 0.8rem, 1.5rem);
  --space-m:   clamp(1.5rem, 1.2vw + 1.2rem, 2.25rem);
  --space-l:   clamp(2rem, 1.8vw + 1.6rem, 3.5rem);
  --space-xl:  clamp(3rem, 2.5vw + 2.4rem, 5rem);
  --space-2xl: clamp(4.5rem, 4vw + 3.5rem, 7.5rem);
  --space-3xl: clamp(6rem, 6vw + 4.5rem, 11rem);

  /* Motion & Easing Language (MiGo Motion Tokens) */
  --ease-snap: cubic-bezier(0.2, 0, 0, 1);
  --ease-glide: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-reveal: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-impact: cubic-bezier(0.85, 0, 0.15, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --duration-instant: 120ms;
  --duration-snap: 260ms;
  --duration-glide: 600ms;
  --duration-long: 1000ms;
  --duration-intro: 1400ms;

  /* Z-Index Hierarchy */
  --z-base: 1;
  --z-content: 5;
  --z-sticky-bar: 20;
  --z-header: 100;
  --z-drawer: 200;
  --z-modal-backdrop: 300;
  --z-modal: 350;
  --z-intro-loader: 500;
  --z-cursor: 1000;

  /* Layout Viewport Anchors */
  --container-max: 1600px;
  --header-height: clamp(60px, 6vw, 84px);
  --grid-gap: clamp(1rem, 2vw, 2.5rem);
  --border-radius-subtle: 2px;
}