/* ==========================================================
   DTKV DESIGN TOKENS
   M9C2B: gemeinsame technische Design-Grundlage im Child Theme
   ========================================================== */

:root {
  /* Farben */
  --dtkv-color-page: #FFFFFF;
  --dtkv-color-surface: #FFFFFF;
  --dtkv-color-card: #FCFBF8;
  --dtkv-color-text: #1F1F1F;
  --dtkv-color-text-muted: #4A4A4A;
  --dtkv-color-line: #E8E4DE;
  --dtkv-color-line-strong: #D8D0C4;
  --dtkv-color-dark: #111820;
  --dtkv-color-black: #000000;
  --dtkv-color-gold: #A9936F;
  --dtkv-color-gold-strong: #745F3F;
  --dtkv-color-gold-hover: #5F4C32;
  --dtkv-color-gold-soft: #F3EFE8;
  --dtkv-color-focus: #745F3F;
  --dtkv-color-success: #2F6F43;
  --dtkv-color-success-soft: #EDF7EF;
  --dtkv-color-warning: #8A5A10;
  --dtkv-color-warning-soft: #FFF7E5;
  --dtkv-color-error: #9B2C2C;
  --dtkv-color-error-soft: #FFF0F0;
  --dtkv-color-info: #245A7A;
  --dtkv-color-info-soft: #F0F6FC;
  --dtkv-color-control-hover: #F2F2F2;

  /* Contentbreiten */
  --dtkv-content-wide: 1200px;
  --dtkv-content-standard: 980px;
  --dtkv-content-reading: 760px;
  --dtkv-content-gutter: clamp(16px, 3vw, 32px);

  /* Typografie */
  --dtkv-font-family-base: inherit;
  --dtkv-font-size-page-title: 1.9rem;
  --dtkv-font-size-section-title: 1.1rem;
  --dtkv-font-size-card-title: 0.98rem;
  --dtkv-font-size-body: 1rem;
  --dtkv-font-size-small: 0.875rem;
  --dtkv-font-size-meta: 0.78rem;
  --dtkv-font-size-stat: 1.6rem;
  --dtkv-line-height-tight: 1.2;
  --dtkv-line-height-base: 1.5;
  --dtkv-line-height-reading: 1.65;
  --dtkv-font-weight-regular: 400;
  --dtkv-font-weight-medium: 600;
  --dtkv-font-weight-semibold: 650;
  --dtkv-font-weight-bold: 700;
  --dtkv-font-weight-heavy: 800;

  /* Spacing */
  --dtkv-space-0: 0;
  --dtkv-space-1: 4px;
  --dtkv-space-2: 8px;
  --dtkv-space-3: 12px;
  --dtkv-space-4: 16px;
  --dtkv-space-5: 20px;
  --dtkv-space-6: 24px;
  --dtkv-space-8: 32px;
  --dtkv-space-10: 40px;
  --dtkv-space-12: 48px;
  --dtkv-space-16: 64px;

  /* Radius */
  --dtkv-radius-none: 0;
  --dtkv-radius-xs: 4px;
  --dtkv-radius-sm: 6px;
  --dtkv-radius-md: 6px;
  --dtkv-radius-lg: 8px;
  --dtkv-radius-pill: 999px;

  /* Schatten: bewusst zurueckhaltend */
  --dtkv-shadow-none: none;
  --dtkv-shadow-subtle: none;
  --dtkv-shadow-card: none;
  --dtkv-shadow-overlay: 0 16px 42px rgba(31, 31, 31, 0.14);

  /* Fokus */
  --dtkv-focus-outline: 2px solid var(--dtkv-color-focus);
  --dtkv-focus-offset: 3px;
  --dtkv-focus-ring: 0 0 0 3px rgba(116, 95, 63, 0.24);

  /* Layer / Z-Index */
  --dtkv-z-content: 1;
  --dtkv-z-sticky-context: 800;
  --dtkv-z-header: 1200;
  --dtkv-z-dropdown: 1210;
  --dtkv-z-popover: 1400;
  --dtkv-z-dialog: 1600;
  --dtkv-z-overlay-max: 2000;

  /* Kanonische Breakpoints, CSS kann Variablen nicht in @media nutzen. */
  --dtkv-breakpoint-wide: 1200px;
  --dtkv-breakpoint-tablet: 1024px;
  --dtkv-breakpoint-mobile: 760px;
  --dtkv-breakpoint-small-mobile: 430px;

  /* Kleine bestehende Komponenten-Tokens */
  --dtkv-filter-button-font-size: 13px;
  --dtkv-filter-button-font-weight: 700;
  --dtkv-filter-button-height: 42px;
  --dtkv-tag-font-size: 13px;
  --dtkv-tag-font-weight: 500;
  --dtkv-tag-height: 28px;
  --dtkv-button-min-height: 44px;
  --dtkv-button-border-width: 2px;
  --dtkv-button-padding-y: 10px;
  --dtkv-button-padding-x: 16px;
  --dtkv-action-chevron-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m7 4 6 6-6 6' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --dtkv-text-action-chevron-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 17'%3E%3Cpath d='M0 0 L8 8 L0 16 L6 16 L14 8 L6 0 Z' fill='black'/%3E%3C/svg%3E");
}