/**
 * @file variables.css
 * Verid Design Tokens
 *
 * Editorial-minimal aesthetic inspired by clean guide/knowledge-base layouts.
 * Built on a warm neutral palette with a coral accent.
 */

:root {
  /* ─── Typography ─────────────────────────────────────── */
  --verid-font-display:  'Figtree', system-ui, -apple-system, sans-serif;
  --verid-font-body:     'Figtree', system-ui, -apple-system, sans-serif;
  --verid-font-mono:     'JetBrains Mono', 'Fira Code', Consolas, monospace;

  /* Type scale */
  --verid-text-xs:   0.75rem;   /* 12px */
  --verid-text-sm:   0.875rem;  /* 14px */
  --verid-text-base: 1rem;      /* 16px */
  --verid-text-md:   1.125rem;  /* 18px */
  --verid-text-lg:   1.25rem;   /* 20px */
  --verid-text-xl:   1.5rem;    /* 24px */
  --verid-text-2xl:  2rem;      /* 32px */
  --verid-text-3xl:  2.5rem;    /* 40px */
  --verid-text-4xl:  3.25rem;   /* 52px */

  /* Line heights */
  --verid-leading-tight:  1.25;
  --verid-leading-snug:   1.4;
  --verid-leading-normal: 1.625;
  --verid-leading-loose:  1.8;

  /* ─── Color Palette ──────────────────────────────────── */

  /* Backgrounds */
  --verid-color-bg:        #FFFFFF;
  --verid-color-surface:   #F3F5FA;   /* kühles Blau-Grau statt warmem Beige */
  --verid-color-surface-2: #E8EBF4;

  /* Borders */
  --verid-color-border:       #DDE1EA;  /* leicht kühler als #E3E0DB */
  --verid-color-border-light: #EBEEF5;

  /* Text */
  --verid-color-text:         #1C1916;
  --verid-color-text-secondary: #635F5A;
  --verid-color-text-muted:    #9E9A96;

  /* Accent — blau (primär) */
  --verid-color-accent:       #1F3CA6;
  --verid-color-accent-hover: #172E8A;
  --verid-color-accent-light: #EEF1FB;
  --verid-color-accent-pale:  #DDE3F7;

  /* Info/Beispiel — coral (sekundär) */
  --verid-color-info:       #D94F3D;
  --verid-color-info-light: #FDF0EE;
  --verid-color-info-pale:  #FBE4E1;

  /* Semantic */
  --verid-color-heading: var(--verid-color-text);
  --verid-color-link:    var(--verid-color-accent);

  /* Chapter / progress indicator colors */
  --verid-color-chapter-bg:     var(--verid-color-surface);
  --verid-color-chapter-active: var(--verid-color-accent);
  --verid-color-chapter-done:   #D94F3D;

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

  /* ─── Layout ─────────────────────────────────────────── */
  --verid-content-max:       740px;
  --verid-content-wide:      960px;
  --verid-sidebar-width:     300px;
  --verid-sidebar-gap:       var(--verid-space-10);
  --verid-container-padding: var(--verid-space-8);
  --verid-header-height:     112px; /* 68px Branding + 44px Nav */

  /* ─── Effects ────────────────────────────────────────── */
  --verid-radius-sm:  4px;
  --verid-radius:     8px;
  --verid-radius-md:  12px;
  --verid-radius-lg:  20px;
  --verid-radius-full: 9999px;

  --verid-shadow-sm: 0 1px 2px rgba(28, 25, 22, 0.06);
  --verid-shadow:    0 2px 8px rgba(28, 25, 22, 0.08), 0 1px 2px rgba(28, 25, 22, 0.04);
  --verid-shadow-md: 0 4px 16px rgba(28, 25, 22, 0.10), 0 2px 4px rgba(28, 25, 22, 0.06);

  /* ─── Transitions ────────────────────────────────────── */
  --verid-transition-fast:   150ms ease;
  --verid-transition:        220ms ease;
  --verid-transition-slow:   350ms ease;

  /* Progress bar */
  --verid-progress: 0%;
}

/* ─── Olivero overrides ──────────────────────────────────── */
/* Map Verid tokens onto Olivero's CSS variable slots         */
:root {
  --color-accent:                var(--verid-color-accent);
  --color-accent-hover:          var(--verid-color-accent-hover);
  --color-link:                  var(--verid-color-accent);
  --color-link-hover:            var(--verid-color-accent-hover);
  --color-heading:               var(--verid-color-heading);
  --font-serif:                  var(--verid-font-display);
  --font-sans:                   var(--verid-font-body);
  --color-border:                var(--verid-color-border);
  --color-background:            var(--verid-color-bg);
}