/* ================================================================
   DESIGN TOKENS — Monochrome brand
   Nelson Medina Portfolio · v4
================================================================ */
:root {
  /* Primitives */
  --_gray-0:   #FFFFFF;
  --_gray-50:  #F8F8F8;
  --_gray-100: #F2F2F2;
  --_gray-200: #E4E4E4;
  --_gray-300: #CBCBCB;
  --_gray-400: #ADADAD;
  --_gray-500: #888888;
  --_gray-600: #555555;
  --_gray-800: #1A1A1A;
  --_gray-900: #0D0D0D;

  /* Brand — monochrome */
  --color-bg:             #FFFFFF;
  --color-surface:        #FFFFFF;
  --color-surface-subtle: #F3F3F1;
  --color-text-primary:   #111111;
  --color-text-secondary: #535353;
  --color-text-tertiary:  #606060;
  --color-accent:         #111111;
  --color-accent-hover:   #333333;
  --color-accent-dark:    #111111;
  --color-accent-tint:    #F0F0EE;
  --color-border:         #DEDEDA;
  --color-border-subtle:  rgba(0,0,0,0.06);
  --color-hero-bg:        #111111;
  --color-hero-text:      #FFFFFF;

  /* Typography */
  --font-sans: 'DM Sans', system-ui, -apple-system, sans-serif;
  --font-mono: 'DM Mono', 'Menlo', monospace;

  /* Weights */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* Line heights */
  --leading-tight:   1.1;
  --leading-snug:    1.2;
  --leading-normal:  1.4;
  --leading-relaxed: 1.65;

  /* Letter spacing */
  --tracking-tight:  -0.035em;  /* loosened from -0.05em per v4 */
  --tracking-normal: 0;
  --tracking-mono:   0.04em;
  --tracking-wide:   0.08em;

  /* Spacing (4px base) */
  --sp-1:  4px;  --sp-2:  8px;  --sp-3:  12px; --sp-4:  16px;
  --sp-5:  20px; --sp-6:  24px; --sp-8:  32px; --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px;

  /* Radius — 3px system */
  --radius:      3px;
  --radius-pill: 999px;

  /* Component radii */
  --radius-btn:   3px;
  --radius-card:  3px;
  --radius-tag:   3px;
  --radius-input: 3px;

  /* Shadows */
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.08);
  --shadow-md:  0 4px 12px rgba(0,0,0,0.10);
  --shadow-lg:  0 8px 24px rgba(0,0,0,0.12);

  /* Layout */
  --container-max:     1160px;
  --container-padding: 48px;
  --nav-height:        60px;

  /* Borders */
  --border-thin: 1px solid var(--color-border);

  /* Focus */
  --color-focus: var(--color-accent-dark);

  /* Motion */
  --dur-fast:   120ms;
  --dur-normal: 250ms;
  --dur-slow:   400ms;
  --ease-out:   cubic-bezier(0.0, 0, 0.2, 1);

  /* Transitions */
  --transition-fast:   var(--dur-fast)   var(--ease-out);
  --transition-normal: var(--dur-normal) var(--ease-out);
  --transition-slow:   var(--dur-slow)   var(--ease-out);
}