/* Design Tokens - Minimalist Black/White Design Philosophy */
/* Inspired by olhalazarieva.com - Extreme minimalism, high contrast */

:root {
  /* Typography - Font Families */
  --font-primary: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-condensed: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'Menlo', 'Monaco', 'Courier New', monospace;

  /* Typography - Font Sizes */
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-md: 16px;
  --text-lg: 18px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 32px;
  --text-4xl: 48px;
  --text-5xl: 48px;
  --text-6xl: 82px;

  /* Typography - Font Weights */
  --font-light: 300;
  --font-regular: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;

  /* Typography - Line Heights */
  --lh-snug: 0.95;
  --lh-tight: 1.0;
  --lh-normal: 1.2;
  --lh-relaxed: 1.25;
  --lh-loose: 1.4;
  --lh-caption: 1.43;

  /* Typography - Letter Spacing (Tighter for minimalist aesthetic) */
  --ls-tight: -3px;
  --ls-tighter: -2px;
  --ls-tightest: -4px;
  --ls-normal: 0;
  --ls-uppercase: 0.1em;
  --ls-wide: 1px;
  --ls-wider: 2px;

  /* Colors - Primary Text (Minimalist Black/White) */
  --color-text-primary: rgb(16, 16, 16);
  --color-text-secondary: rgb(144, 140, 140);
  --color-text-tertiary: rgb(170, 170, 170);
  --color-text-on-dark: rgb(255, 255, 255);
  --color-text-on-dark-secondary: rgba(255, 255, 255, 0.8);

  /* Colors - Backgrounds (Minimalist) */
  --color-bg-primary: rgb(247, 247, 247);
  --color-bg-secondary: rgb(255, 255, 255);
  --color-bg-dark: rgb(16, 16, 16);
  --color-bg-dark-gradient: linear-gradient(rgb(16, 16, 16), rgb(0, 0, 0));

  /* Colors - Accents (Minimalist - using black as accent) */
  --accent-50: rgba(16, 16, 16, 0.08);
  --accent-100: rgba(16, 16, 16, 0.15);
  --accent-200: rgba(16, 16, 16, 0.25);
  --accent-600: rgb(16, 16, 16);
  --accent-700: rgb(16, 16, 16);
  --accent-800: rgb(0, 0, 0);
  --accent-900: rgb(0, 0, 0);

  /* Colors - Teal Palette */
  --teal-50: rgb(240, 253, 250);
  --teal-100: rgb(204, 251, 241);
  --teal-200: rgb(153, 246, 228);
  --teal-300: rgb(94, 234, 212);
  --teal-400: rgb(45, 212, 191);
  --teal-500: rgb(20, 184, 166);
  --teal-600: rgb(13, 148, 136);
  --teal-700: rgb(15, 118, 110);
  --teal-800: rgb(17, 94, 89);
  --teal-900: rgb(19, 78, 74);

  /* Colors - UI (Minimalist borders) */
  --color-border: rgb(239, 239, 239);
  --color-border-dark: rgb(16, 16, 16);

  /* Shadows */
  --shadow-sm: rgba(0, 0, 0, 0.05) 0 1px 2px;
  --shadow-md: rgba(0, 0, 0, 0.1) 0 4px 12px;
  --shadow-lg: rgba(0, 0, 0, 0.15) 0 8px 24px;
  --shadow-button: rgba(0, 0, 0, 0.3) 0px 1px 2px 0px, rgb(0, 0, 0) 0px 0px 0px 0px, rgba(255, 255, 255, 0.3) 1px 1px 0.25px 0px inset, rgba(255, 255, 255, 0.5) 0px 2px 1px 0px inset;
  --shadow-card-dark: rgba(95, 95, 95, 0.5) 0px 2px 1px 0px inset, rgba(255, 255, 255, 0.62) 1px 1px 0.2px 0px inset;

  /* Border Radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 19px;
  --radius-card: 24px;
  --radius-full: 50%;

  /* Spacing Scale */
  --small-space-1: 1px;
  --small-space-2: 2px;
  --small-space-3: 3px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* Layout */
  --container-max: 1120px;
  --container-pad: 20px;
  --content-width: 750px;

  /* Motion (Smooth transitions like olhalazarieva.com) */
  --duration-fast: 150ms;
  --duration-normal: 280ms;
  --duration-slow: 500ms;
  --duration-slower: 800ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: ease-in-out;
  --ease-main: cubic-bezier(0.11, 0.82, 0.39, 0.92);
  --ease: ease;

  /* Focus Styles */
  --focus-ring: 2px solid rgba(15, 118, 110, 0.5);
  --focus-offset: 2px;
}

/* Responsive Typography */
@media (max-width: 640px) {
  :root {
    --text-6xl: 48px;
    --text-5xl: 40px;
    --text-4xl: 32px;
    --text-3xl: 28px;
  }
}