/* ==============================================
   DESIGN TOKENS - Site-wide design system
   ============================================== */

@font-face {
  font-family: "Glebs";
  src: url("/assets/Glebs-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ======================
     COLORS
     ====================== */
  
  /* Primary colors (only 4) */
  --color-white: #ffffff;
  --color-black: #000000;
  --color-blue: #0022FF;
  --color-gray: #7E7E7E;
  
  /* Semantic aliases */
  --color-text: var(--color-black);
  --color-text-muted: var(--color-gray);
  --color-background: var(--color-white);
  --color-accent: var(--color-blue);
  --color-icon: #6b6b6b;
  
  /* Borders */
  --color-border: #e0e0e0;
  --color-border-hover: var(--color-black);
  
  /* ======================
     TYPOGRAPHY
     ====================== */
  
  /* Font family */
  --font-family: "Geist", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  
  /* Change this base value to scale all font sizes */
  --font-size-unit: 14px;
  
  /* Font sizes (ratios of base) */
  --font-size-xs: calc(var(--font-size-unit) * 0.857);  /* ~12px */
  --font-size-sm: calc(var(--font-size-unit) * 0.929);  /* ~13px */
  --font-size-base: var(--font-size-unit);               /* 14px */
  --font-size-lg: calc(var(--font-size-unit) * 1.286);  /* ~18px */
  --font-size-xl: calc(var(--font-size-unit) * 1.714);  /* ~24px */
  
  /* Line heights */
  --line-height-tight: 1.2;
  --line-height-base: 1.4;
  --line-height-relaxed: 1.6;
  
  /* Font weights */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  
  /* ======================
     SPACING (based on --space-unit)
     ====================== */
  
  /* Change this base value to scale all spacing */
  --space-unit: 4px;
  
  /* Calculated scale (multipliers of base) */
  --space-1: calc(var(--space-unit) * 1);   /* 4px */
  --space-2: calc(var(--space-unit) * 2);   /* 8px */
  --space-3: calc(var(--space-unit) * 3);   /* 12px */
  --space-4: calc(var(--space-unit) * 4);   /* 16px */
  --space-5: calc(var(--space-unit) * 5);   /* 20px */
  --space-6: calc(var(--space-unit) * 6);   /* 24px */
  --space-8: calc(var(--space-unit) * 8);   /* 32px */
  --space-10: calc(var(--space-unit) * 10); /* 40px */
  --space-12: calc(var(--space-unit) * 12); /* 48px */
  --space-15: calc(var(--space-unit) * 15); /* 60px */
  --space-20: calc(var(--space-unit) * 20); /* 80px */
  --space-30: calc(var(--space-unit) * 30); /* 120px */
  
  /* Component spacing */
  --content-width: 420px;
  --page-margin: var(--space-30);
  --section-gap: var(--space-30);
  --grid-gap: 30px;
  --icon-gap: var(--space-2);
  
  /* ======================
     BORDER RADIUS
     ====================== */
  
  --radius-none: 0;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 6px;
  --radius-full: 9999px;
  
  /* ======================
     SHADOWS
     ====================== */
  
  --shadow-none: none;
  
  /* ======================
     TRANSITIONS
     ====================== */
  
  --transition-fast: 0.15s ease;
  --transition-base: 0.2s ease;
  --transition-slow: 0.3s ease;
  
  /* ======================
     Z-INDEX LAYERS
     ====================== */
  
  --z-base: 1;
  --z-sticky: 20;
  --z-modal: 999;
  --z-tooltip: 1000;
  
  /* ======================
     BREAKPOINTS (for reference)
     ====================== */
  
  /* Mobile: 0 - 767px */
  /* Tablet: 768px - 1919px */
  /* Desktop FHD: 1920px - 1999px */
  /* Desktop 2K+: 2000px+ */
}

/* ======================
   MOBILE TOKENS
   ====================== */

@media (max-width: 767px) {
  :root {
    --grid-gap: var(--space-2);
    --page-margin: var(--space-15);
  }
}