:root {
  /* --- CMS Controlled Variables (Keep these for CMS compatibility) --- */
  --color-primary: #d32f2f;
  --color-secondary: #1e293b;
  --color-accent-cms: #f8fafc; /* Renamed to avoid collision with token */
  --color-highlight: #f59e0b;
  --hero-image: url('/public/assets/image/slider/image1.png');

  --color-text-primary: #0f172a;
  --color-text-secondary: #475569;
  --color-background: #fcfcfc;
  --color-surface: #ffffff;
  --color-text-on-primary: #ffffff;
  --color-border-cms: rgba(15, 23, 42, 0.08);
  --color-success: #10b981;
  --color-error: #ef4444;

  /* --- Modern Web Token System (Clean Light Profile) --- */
  
  /* Colors - Mapping CMS variables to tokens with improved contrast */
  --color-bg:          #f3f4f6; /* Slightly darker background for better card contrast */
  --color-surface:     #ffffff;
  --color-surface-2:   #e5e7eb;
  --color-border:      rgba(15, 23, 42, 0.1);
  --color-border-strong: rgba(15, 23, 42, 0.2);
  --color-text:        #0f172a; /* Darker text */
  --color-text-muted:  #475569;
  --color-accent:      var(--color-primary);
  --color-accent-hover:#b71c1c;
  --color-accent-light: rgba(211, 47, 47, 0.08);
  --color-primary-light: rgba(211, 47, 47, 0.15);
  --color-danger:      var(--color-error);
  --color-success:     var(--color-success);
  --color-warning:     var(--color-highlight);

  /* Typografie */
  --font-sans:    "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-display: "Poppins", var(--font-sans);
  
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;
  --text-5xl:  3rem;
  --text-7xl:  4.5rem;

  /* Spacing (4px-Raster) */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* Layout */
  --container: 1200px;
  --container-narrow: 800px;
  --header-height: 80px;

  /* Radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-full: 9999px;

  /* Elevation / Shadows */
  --shadow-sm:  0 1px 2px rgba(0,0,0,0.05);
  --shadow-md:  0 4px 12px rgba(211, 47, 47, 0.1);
  --shadow-lg:  0 10px 40px rgba(211, 47, 47, 0.15);
  --shadow-glow: 0 0 40px rgba(211, 47, 47, 0.2);

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 400ms;

  /* --- Legacy Aliases (For template.css compatibility) --- */
  --color1: var(--color-primary);
  --color2: var(--color-bg);
  --color3: var(--color-surface);
  --color4: var(--color-text);
  
  --space1: var(--space-4);
  --space2: var(--space-8);
  --space3: var(--space-2);
  --space4: var(--space-1);
  
  --border-radius1: var(--radius-md);
  --border-radius2: var(--radius-sm);
  --box-shadow: var(--shadow-md);
  --z-index-layer2: 100;
  --media-size-dektop: var(--container);
}