/* ============================================================
   Design tokens - Pierre Gathy portfolio
   Cool deep-ink palette with sage-mint accent. Editorial serif
   display + geometric sans body. Dark but blue-cool, not warm.
   ============================================================ */

:root {
  /* Surfaces - cool near-black, slightly blue */
  --bg:            #0A0E14;   /* page background */
  --bg-1:          #121721;   /* card / surface */
  --bg-2:          #1A2030;   /* elevated surface */
  --bg-3:          #242C40;   /* hover / popover */
  --line:          #222A3A;   /* hairline borders */
  --line-strong:   #323B50;   /* stronger divider */

  /* Ink (text) - cool off-white, never pure white */
  --ink:           #E8EDF5;   /* primary text */
  --ink-2:         #B9C2D1;   /* secondary */
  --ink-3:         #7F8AA0;   /* tertiary / meta */
  --ink-4:         #55607A;   /* muted / disabled */

  /* Accent - sage mint, cool and deliberate */
  --accent:        #8FD5C0;
  --accent-hi:     #B6E5D6;
  --accent-lo:     #5FA890;
  --accent-wash:   rgba(143, 213, 192, 0.10);

  /* Category colors (cool spectrum) */
  --cat-research:  #C8B87A;   /* pale gold */
  --cat-quant:     #E6A89A;   /* dusty rose */
  --cat-ml:        #8AC5E0;   /* ice blue */
  --cat-web:       #B6D49A;   /* pale sage */
  --cat-data:      #C9A8D8;   /* soft lavender */
  --cat-hardware:  #E8BE7F;   /* warm amber - for capstone / engineering */

  /* Type - Instrument Serif (display) + Space Grotesk (body) + JetBrains Mono */
  --font-serif:    "Instrument Serif", "Source Serif 4", "Iowan Old Style", Georgia, serif;
  --font-sans:     "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono:     "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;

  /* Scale (modular-ish, 1.25 ratio) */
  --t-12: 0.75rem;
  --t-14: 0.875rem;
  --t-16: 1rem;
  --t-18: 1.125rem;
  --t-20: 1.25rem;
  --t-24: 1.5rem;
  --t-32: 2rem;
  --t-40: 2.5rem;
  --t-56: 3.5rem;
  --t-72: 4.5rem;

  /* Space (4px base) */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-8: 48px;
  --s-10: 64px;
  --s-12: 96px;
  --s-16: 128px;

  /* Radius */
  --r-1: 4px;
  --r-2: 8px;
  --r-3: 12px;
  --r-4: 20px;
  --r-full: 999px;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-io:  cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 140ms;
  --dur-med:  260ms;
  --dur-slow: 520ms;

  /* Shadows */
  --shadow-1: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-2: 0 8px 24px rgba(0,0,0,0.5);
  --shadow-glow: 0 0 24px rgba(143, 213, 192, 0.22);

  /* Layout */
  --max-width: 1120px;
  --max-width-prose: 680px;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}