/* ============================================
   Design Tokens — Систематический обзор
   ============================================ */

@layer reset, tokens, base, layout, components, guide, print, utilities;

@layer tokens {
  :root {
  /* --- Palette --- */
  --color-bg:          #FAFAF8;
  --color-surface:     #FFFFFF;
  --color-surface-alt: #F3F2EE;
  --color-border:      #E2E0DA;
  --color-border-light:#EEECE6;

  --color-text:        #1A1A1A;
  --color-text-secondary: #5C5C5C;
  --color-text-muted:  #8A8A8A;

  --color-accent:      #1A4F8A;
  --color-accent-hover:#123669;
  --color-accent-light:#E3EDF8;
  --color-accent-bg:   #F0F5FC;

  --color-link:        #1A4F8A;
  --color-link-hover:  #123669;
  --color-link-visited:#5A4A7C;
  --color-print-ink:   #000000;
  --color-print-paper: #FFFFFF;
  --color-print-muted: #555555;
  --color-print-border:#CCCCCC;

  --color-success:     #3A7D5C;
  --color-warning:     #A67C2E;

  /* --- Typography --- */
  --font-body:    'Source Serif 4', 'Georgia', 'Times New Roman', serif;
  --font-ui:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

  --text-base:    clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-sm:      0.875rem;
  --text-xs:      0.8125rem;
  --text-lg:      clamp(1.125rem, 1rem + 0.5vw, 1.25rem);
  --text-xl:      clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);
  --text-2xl:     clamp(1.5rem, 1.2rem + 1.5vw, 2rem);
  --text-3xl:     clamp(1.875rem, 1.4rem + 2vw, 2.5rem);
  --text-4xl:     clamp(2.25rem, 1.6rem + 2.5vw, 3rem);

  --leading-tight:   1.25;
  --leading-snug:    1.4;
  --leading-normal:  1.6;
  --leading-relaxed: 1.8;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.02em;
  --tracking-caps:   0.08em;

  /* --- Spacing --- */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* --- Layout --- */
  --content-width:     720px;
  --wide-width:        960px;
  --max-width:         1200px;
  --sidebar-width:     260px;

  --gutter:            clamp(1rem, 4vw, 2rem);

  /* --- Borders & Radius --- */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-full: 9999px;

  /* --- Shadows --- */
  --shadow-sm:   0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:   0 2px 8px rgba(0,0,0,0.06);
  --shadow-lg:   0 4px 16px rgba(0,0,0,0.08);

  /* --- Transitions --- */
  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  }
}