/**
 * Lo/Be Lab - Design Tokens
 *
 * Full-width editorial layout inspired by tishukov.com
 * Large serif-scale text in sans-serif, generous whitespace, minimal nav
 */

:root {
  /* ========== TYPOGRAPHY ========== */

  --font-body: 'Inter', -apple-system, system-ui, sans-serif;

  /* Font Sizes — larger for editorial feel */
  --text-xs: 11px;
  --text-sm: 13px;
  --text-base: 15px;
  --text-md: 18px;
  --text-lg: 22px;
  --text-xl: 28px;
  --text-2xl: 36px;
  --text-3xl: 48px;
  --text-hero: 26px;

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

  /* Line Heights */
  --lh-tight: 1.1;
  --lh-body: 1.35;
  --lh-relaxed: 1.5;
  --lh-loose: 1.65;

  /* Letter Spacing */
  --ls-tight: -0.3px;
  --ls-normal: 0;
  --ls-wide: 0.08em;
  --ls-wider: 0.12em;

  /* ========== COLOR SYSTEM ========== */

  --color-text: #1a1a1a;
  --color-text-secondary: #555;
  --color-text-muted: #999;
  --color-bg: #f8f8f8;
  --color-bg-white: #ffffff;
  --color-bg-dark: #1a1a1a;
  --color-bg-dark-secondary: #222;

  /* Borders */
  --color-border: #ddd;
  --color-border-light: #eee;

  /* Links */
  --color-link: #1a1a1a;
  --color-link-hover: #555;

  /* Category Colors */
  --color-sensemaking: #1565C0;
  --color-identity: #43A047;
  --color-dialogue: #EF6C00;

  /* ========== LAYOUT ========== */

  --nav-height: 48px;
  --page-max: 1400px;
  --page-padding: 28px;
  --section-gap: 120px;
  --block-gap: 60px;
  --col-gap: 40px;

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

  /* ========== TRANSITIONS ========== */

  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 400ms;
  --easing: cubic-bezier(0.25, 0, 0.2, 1);

  /* ========== Z-INDEX ========== */

  --z-base: 0;
  --z-content: 1;
  --z-nav: 100;
}

/* ========== RESPONSIVE ========== */

@media (max-width: 1100px) {
  :root {
    --page-padding: 24px;
    --section-gap: 100px;
    --block-gap: 48px;
    --text-hero: 22px;
  }
}

@media (max-width: 768px) {
  :root {
    --page-padding: 20px;
    --section-gap: 72px;
    --block-gap: 36px;
    --col-gap: 24px;
    --text-hero: 20px;
    --text-2xl: 28px;
    --text-xl: 22px;
  }
}

@media (max-width: 480px) {
  :root {
    --page-padding: 16px;
    --section-gap: 56px;
    --block-gap: 28px;
    --text-hero: 18px;
    --text-2xl: 24px;
  }
}