/* Update color var names to fa-* while keeping pg-* as aliases during migration */
/* =========================================================
   FRACTIONAL AESTHETICS — Design Tokens
   Colors, type, spacing, motion
   ========================================================= */

/* ---------- Brand fonts (self-hosted) ---------- */
@font-face {
  font-family: 'PP Mondwest';
  src: url('fonts/PPMondwest-Regular.woff2') format('woff2'),
       url('fonts/PPMondwest-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Space Grotesk';
  src: url('fonts/SpaceGrotesk-VariableFont_wght.ttf') format('truetype-variations'),
       url('fonts/SpaceGrotesk-VariableFont_wght.ttf') format('truetype');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('fonts/Inter-VariableFont_opsz_wght.ttf') format('truetype-variations'),
       url('fonts/Inter-VariableFont_opsz_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('fonts/Inter-Italic-VariableFont_opsz_wght.ttf') format('truetype-variations'),
       url('fonts/Inter-Italic-VariableFont_opsz_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ---------- Color: neutrals ---------- */
  --fa-bg:        #0a0a0a;   /* Void Black — primary background */
  --fa-bg-elev:  #141414;   /* slightly raised surfaces */
  --fa-bg-soft:  #1c1c1c;   /* cards / subtle elevation */
  --fa-bg-slot:  #1a1a1a;   /* bust placeholder slots */
  --fa-line:     rgba(255, 255, 255, 0.08);
  --fa-line-strong: rgba(255, 255, 255, 0.18);

  --fa-fg:       #ffffff;   /* Marble White — primary text */
  --fa-fg-2:     #c8c8c8;   /* Ash Grey — secondary */
  --fa-fg-3:     #a8a8a8;   /* tertiary / metadata — bumped from #909090 for AAA compliance */
  --fa-fg-inv:   #0a0a0a;   /* text on yellow */

  /* ---------- Color: accent ---------- */
  --fa-yellow:   #FFD84D;   /* Restoration Yellow — rare, meaningful */

  /* ---------- Pop-art overlays (imagery only) ---------- */
  --fa-magenta:  #E91E63;
  --fa-teal:     #00E5D4;   /* also: diagnostic bust wireframe interior */
  --fa-red:      #FF3B3B;

  /* ---------- Semantic ---------- */
  --color-bg:         var(--fa-bg);
  --color-fg:         var(--fa-fg);
  --color-fg-muted:   var(--fa-fg-2);
  --color-fg-subtle:  var(--fa-fg-3);
  --color-accent:     var(--fa-yellow);
  --color-accent-fg:  var(--fa-fg-inv);
  --color-border:     var(--fa-line);
  --color-border-strong: var(--fa-line-strong);

  /* ---------- Type families ---------- */
  --font-display:     'PP Mondwest', ui-monospace, 'Courier New', monospace;
  --font-body:        'Space Grotesk', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono:        'PP Mondwest', ui-monospace, monospace;
  --font-editorial:   'Inter', ui-sans-serif, system-ui, sans-serif;   /* pull quotes, editorial italic */

  /* ---------- Type sizes ---------- */
  --fs-hero:     clamp(48px, 6vw, 120px);
  --fs-display:  clamp(48px, 7vw, 88px);
  --fs-h1:       clamp(40px, 5.5vw, 72px);
  --fs-h2:       clamp(32px, 4vw, 56px);
  --fs-h3:       clamp(24px, 2.8vw, 36px);
  --fs-subhead:  clamp(20px, 2.2vw, 28px);
  --fs-body-lg:  1.1875rem;
  --fs-body:     1.0625rem;
  --fs-ui:       0.9375rem;
  --fs-caption:  12px;

  /* ---------- Tracking + leading ---------- */
  --tracking-tight: -0.035em;
  --tracking-snug:  -0.02em;
  --tracking-vt:    -0.01em;
  --lh-hero:  0.9;
  --lh-tight: 1.05;
  --lh-snug:  1.25;
  --lh-body:  1.65;

  /* ---------- Weight ---------- */
  --w-regular: 400; --w-medium: 500; --w-semibold: 600; --w-bold: 700;

  /* ---------- Spacing ---------- */
  --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-16: 64px;--space-20: 80px;--space-24: 96px;

  --pad-section-x: clamp(24px, 5vw, 80px);
  --pad-section-y: clamp(80px, 10vw, 160px);
  --pad-nav-x:     clamp(20px, 4vw, 48px);

  --max-content: 1400px;
  --max-prose:   640px;

  /* ---------- Radii ---------- */
  --r-0: 0px; --r-1: 2px; --r-2: 6px; --r-3: 12px; --r-full: 9999px;

  /* ---------- Motion ---------- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-editorial: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-out:      cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-hover:  200ms;
  --dur-state:  300ms;
  --dur-enter:  600ms;
  --dur-menu:   550ms;

  /* ---------- Blur ---------- */
  --blur-nav: 14px;
  --nav-bg-scrim: rgba(10, 10, 10, 0.75);
}

/* ---- Legacy pg-* aliases for any imported preview cards ---- */
:root {
  --pg-bg: var(--fa-bg); --pg-bg-elev: var(--fa-bg-elev); --pg-bg-soft: var(--fa-bg-soft);
  --pg-fg: var(--fa-fg); --pg-fg-2: var(--fa-fg-2); --pg-fg-3: var(--fa-fg-3);
  --pg-yellow: var(--fa-yellow); --pg-magenta: var(--fa-magenta);
  --pg-teal: var(--fa-teal); --pg-red: var(--fa-red);
  --pg-line: var(--fa-line); --pg-line-strong: var(--fa-line-strong);
}