/**
 * Knowledge On Web — Design Tokens
 * 
 * Central CSS variables establishing the visual identity, typography,
 * color tokens, elevation shadows, and layout grids.
 */

:root {
  /* Brand Palette - Primary */
  --kow-color-midnight:    #0F172A;
  --kow-color-ocean-blue:  #2563EB;
  --kow-color-sky-blue:    #3B82F6;

  /* Brand Palette - Neutrals */
  --kow-color-charcoal:    #1F2937;
  --kow-color-gray:        #6B7280;
  --kow-color-light-gray:  #E5E7EB;
  --kow-color-soft:        #F8FAFC;
  --kow-color-white:       #FFFFFF;

  /* Semantic Feedback Tokens */
  --kow-color-success:     #10B981;
  --kow-color-warning:     #F59E0B;
  --kow-color-alert:       #EF4444;

  /* Typography Stacks */
  --kow-font-heading: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --kow-font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --kow-font-mono:    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;

  /* Type Scale */
  --kow-fs-xs:   0.75rem;    /* 12px */
  --kow-fs-sm:   0.875rem;   /* 14px */
  --kow-fs-base: 1rem;       /* 16px */
  --kow-fs-md:   1.125rem;   /* 18px */
  --kow-fs-lg:   1.25rem;    /* 20px */
  --kow-fs-xl:   1.5rem;     /* 24px */
  --kow-fs-2xl:  1.875rem;   /* 30px */
  --kow-fs-3xl:  2.25rem;    /* 36px */
  --kow-fs-4xl:  3rem;       /* 48px */
  --kow-fs-5xl:  3.75rem;    /* 60px */

  /* Line Heights */
  --kow-lh-tight:  1.2;
  --kow-lh-snug:   1.35;
  --kow-lh-normal: 1.6;
  --kow-lh-loose:  1.75;

  /* Spacing System */
  --kow-space-1:  4px;
  --kow-space-2:  8px;
  --kow-space-3:  12px;
  --kow-space-4:  16px;
  --kow-space-6:  24px;
  --kow-space-8:  32px;
  --kow-space-12: 48px;
  --kow-space-16: 64px;
  --kow-space-20: 80px;
  --kow-space-24: 96px;

  /* Layout Widths */
  --kow-container-max: 1300px;
  --kow-article-max:   720px;
  --kow-sidebar-width: 360px;
  --kow-header-height: 72px;

  /* Border Radii */
  --kow-radius-xs: 4px;
  --kow-radius-sm: 8px;
  --kow-radius-md: 12px;
  --kow-radius-lg: 16px;
  --kow-radius-full: 9999px;

  /* Elevation Shadows */
  --kow-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
  --kow-shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --kow-shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.07), 0 2px 4px -2px rgba(15, 23, 42, 0.05);
  --kow-shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -4px rgba(15, 23, 42, 0.04);
  --kow-shadow-xl: 0 20px 25px -5px rgba(15, 23, 42, 0.10), 0 8px 10px -6px rgba(15, 23, 42, 0.04);

  /* Transitions */
  --kow-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --kow-transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
}