/* Design Tokens */
:root {
  /* Colors */
  --color-bg:           #FEFCF8;
  --color-bg-alt:       #F5F0E8;
  --color-surface:      #FFFFFF;
  --color-text:         #2C2416;
  --color-text-muted:   #8C7E6A;
  --color-primary:      #E8663D;
  --color-primary-hover:#D4532A;
  --color-accent:       #4A90A4;
  --color-accent-hover: #3A7A8E;
  --color-success:      #5B9A6F;
  --color-warning:      #D4A843;
  --color-danger:       #C45B4A;
  --color-tag-bg:       #EDE7DC;
  --color-tag-text:     #5C4F3D;
  --color-slider-track: #DDD5C8;
  --color-slider-fill:  linear-gradient(90deg, #4A90A4, #E8663D);
  --color-border:       #E0D8CC;
  --color-overlay:      rgba(44, 36, 22, 0.5);
  --color-toolbar-bg:   rgba(254, 252, 248, 0.88);

  /* Tag dimension colors */
  --dim-topic:    #E8663D;
  --dim-audience: #4A90A4;
  --dim-format:   #D4A843;
  --dim-tone:     #5B9A6F;
  --dim-pedagogy: #8E6BAB;
  --dim-safety:   #C45B4A;

  --dim-topic-bg:    rgba(232, 102, 61, 0.1);
  --dim-audience-bg: rgba(74, 144, 164, 0.1);
  --dim-format-bg:   rgba(212, 168, 67, 0.1);
  --dim-tone-bg:     rgba(91, 154, 111, 0.1);
  --dim-pedagogy-bg: rgba(142, 107, 171, 0.1);
  --dim-safety-bg:   rgba(196, 91, 74, 0.1);

  /* Typography */
  --font-heading: 'DM Serif Display', Georgia, serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', monospace;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.25rem;
  --text-xl:   1.5rem;
  --text-2xl:  2rem;
  --text-3xl:  2.75rem;
  --text-hero: 4rem;

  --leading-tight:  1.1;
  --leading-snug:   1.3;
  --leading-normal: 1.6;
  --leading-relaxed: 1.8;

  /* Spacing */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-7:  3rem;
  --space-8:  4rem;
  --space-9:  6rem;

  /* Layout */
  --container-max: 960px;
  --toolbar-height: 64px;
  --sidebar-width: 300px;
  --border-radius-sm: 6px;
  --border-radius: 12px;
  --border-radius-lg: 20px;
  --border-radius-full: 9999px;

  /* Breakpoints (for reference only, use media queries) */
  --bp-sm: 480px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;

  /* Shadows */
  --shadow-sm:  0 1px 3px rgba(44, 36, 22, 0.08);
  --shadow-md:  0 4px 12px rgba(44, 36, 22, 0.12);
  --shadow-lg:  0 8px 24px rgba(44, 36, 22, 0.16);
  --shadow-xl:  0 16px 48px rgba(44, 36, 22, 0.20);

  /* Transitions */
  --transition-fast:   100ms ease;
  --transition-normal: 200ms ease;
  --transition-slow:   300ms ease-out;
  --transition-bounce: 300ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Z-index layers */
  --z-content:   1;
  --z-toolbar:   100;
  --z-sidebar:   200;
  --z-modal:     300;
  --z-toast:     400;
}