/**
 * CSS Variables - Typography & Design Tokens
 * Portfolio Website - Based on Behance design concept
 */

:root {
  /* Font Families */
  --font-ui: 'Montserrat', sans-serif;
  --font-code: 'JetBrains Mono', monospace;
  --font-hero-title: 'Anton', sans-serif;
  --font-hero-name: 'Whisper', cursive;

  /* Header Layout */
  --header-padding-x: clamp(3rem, 8vw, 5rem);

  /* Header Color Palette */
  --color-bg-dark: #1A1613;
  --color-text-white: #FFFFFF;
  --color-accent-gold: #C0A070;
  --color-text-muted: #B0B0B0;
  --color-portrait-bg: #C8A880;

  /* Font Sizes */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 2rem;
  --text-4xl: 2.5rem;
  --text-5xl: 3rem;
  --text-hero: 4rem;

  /* Font Weights */
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-bold: 700;

  /* Line Heights */
  --leading-tight: 1.2;
  --leading-normal: 1.5;
  --leading-relaxed: 1.75;
}