/*
Theme Name: Dratschjona Premium Home
Theme URI: https://www.dratschjona.de/
Author: Oleg Kononin
Author URI: https://www.dratschjona.de/
Description: High-Performance Custom WordPress Theme für Dratschjona Smart Home & Meister Elektrik. Entwickelt mit Material Design 3 Dark Theme Tokens, Fluid Typography, WCAG 2.1 AA Barrierefreiheit, Schema.org SEO und LCP-Optimierung.
Version: 0.1-2-g587ba97
Text Domain: dratschjona
*/

/* Core Design System CSS Custom Properties */
:root {
  /* Colors */
  --color-primary: #ffb4aa;
  --color-primary-container: #e30613;
  --color-on-primary: #690003;
  --color-on-primary-container: #fff5f3;
  --color-primary-fixed: #ffdad5;
  
  --color-secondary: #e9c349;
  --color-secondary-container: #af8d11;
  --color-on-secondary: #3c2f00;
  
  --color-tertiary: #a7c8ff;
  --color-tertiary-container: #0071d4;
  --color-on-tertiary-container: #f5f7ff;
  
  --color-background: #131313;
  --color-on-background: #e5e2e1;
  --color-surface: #131313;
  --color-on-surface: #e5e2e1;
  --color-surface-dim: #131313;
  --color-surface-bright: #3a3939;
  --color-surface-variant: #353534;
  --color-on-surface-variant: #e9bcb6;
  
  --color-surface-container-lowest: #0e0e0e;
  --color-surface-container-low: #1c1b1b;
  --color-surface-container: #201f1f;
  --color-surface-container-high: #2a2a2a;
  --color-surface-container-highest: #353534;
  
  --color-outline: #af8782;
  --color-outline-variant: #5e3f3b;
  --color-error: #ffb4ab;
  --color-error-container: #93000a;

  /* Typography Families */
  --font-display: 'Libre Caslon Text', Georgia, serif;
  --font-body: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Spacing */
  --spacing-xs: 4px;
  --spacing-base: 8px;
  --spacing-sm: 12px;
  --spacing-margin-mobile: 16px;
  --spacing-md: 24px;
  --spacing-lg: 48px;
  --spacing-margin-desktop: 64px;
  --spacing-xl: 80px;
  --spacing-section: 120px;

  /* Border Radii */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-full: 12px;
}