/* =========================================================
   Design Tokens — Ernest Serunkuma Portfolio
   UI/UX Pro Max — Personal Authority Editorial
   ========================================================= */

:root {
  /* ---------------------------------------------------------
     Color Palette
     --------------------------------------------------------- */
  --color-primary:              #D99A21;
  --color-primary-light:        #F9EDD0;
  --color-surface:              #FFFFFF;
  --color-surface-alt:          #F5F0E8;
  --color-on-surface:           #222222;
  --color-on-surface-muted:     #6F6F6F;
  --color-ink:                  #111111;
  --color-border:               #E5DDD0;
  --color-overlay:              rgba(17, 17, 17, 0.92);

  /* Dark mode tokens (applied via media query in style.css) */
  --color-surface-dark:         #111111;
  --color-surface-alt-dark:     #1D1D1D;
  --color-on-surface-dark:      #E8E2D9;
  --color-on-surface-muted-dark: #888888;
  --color-border-dark:          #2E2E2E;

  /* Derived dark variables (set by media query) */
  --color-surface-now:          var(--color-surface);
  --color-surface-alt-now:      var(--color-surface-alt);
  --color-on-surface-now:       var(--color-on-surface);
  --color-on-surface-muted-now: var(--color-on-surface-muted);
  --color-border-now:           var(--color-border);

  /* ---------------------------------------------------------
     Typography
     --------------------------------------------------------- */
  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body:    system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono:    "JetBrains Mono", "SF Mono", "Courier New", monospace;

  --text-xs:   0.75rem;   /* 12px */
  --text-sm:   0.875rem;  /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-lg:   1.125rem;  /* 18px */
  --text-xl:   1.25rem;   /* 20px */
  --text-2xl:  1.5rem;    /* 24px */
  --text-3xl:  1.875rem;  /* 30px */
  --text-4xl:  2.25rem;   /* 36px */
  --text-5xl:  3rem;      /* 48px */
  --text-hero: clamp(2.5rem, 6vw, 4.5rem);

  /* ---------------------------------------------------------
     Spacing (4/8 dp rhythm)
     --------------------------------------------------------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* ---------------------------------------------------------
     Z-Index Scale
     --------------------------------------------------------- */
  --z-base:    0;
  --z-raised:  10;
  --z-overlay: 20;
  --z-nav:     40;
  --z-modal:   100;
  --z-top:     1000;

  /* ---------------------------------------------------------
     Motion
     --------------------------------------------------------- */
  --transition-fast:   150ms;
  --transition-base:   200ms;
  --transition-medium: 300ms;
  --transition-slow:   400ms;
  --ease-out:          cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-spring:       cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ---------------------------------------------------------
     Layout
     --------------------------------------------------------- */
  --container-max:      1200px;
  --container-padding:  var(--space-6);
  --nav-height:         72px;
  --nav-height-mobile: 64px;
}

@media (min-width: 1024px) {
  :root {
    --container-padding: var(--space-8);
  }
}