:root {
  /* ================================================
     CALCULATOR DESIGN SYSTEM - TWO-LAYER TOKENS
     Layer 1: Primitive tokens (reusable scale)
     Layer 2: Semantic tokens (reference primitives)
     ================================================ */

  /* ===== LAYER 1: PRIMITIVE TOKENS ===== */
  --test: 2rem;
  /* Primitive Colors */
  --calc-purple-500: hsl(314deg 56% 49%);
  --calc-purple-600: hsl(314deg 56% 44%);
  --calc-green-400: hsl(86deg 54% 53%);
  --calc-gray-50: hsl(0deg 0% 94% / 85%);
  --calc-gray-100: hsl(0deg 0% 94%);
  --calc-gray-300: hsl(0deg 0% 83%);
  --calc-gray-400: hsl(0deg 0% 60%);
  --calc-gray-500: hsl(0deg 0% 50%);
  --calc-gray-600: hsl(0deg 0% 40%);
  --calc-gray-900: hsl(0deg 0% 17%);
  --calc-white: hsl(0deg 0% 100%);
  --calc-red-400: hsl(0deg 75% 63%);
  --calc-transparent: transparent;

  /* Primitive Spacing Scale - rem based, scale steps */
  --calc-space-1: 0.25rem; /* 4px */
  --calc-space-2: 0.5rem; /* 8px */
  --calc-space-3: 0.75rem; /* 12px */
  --calc-space-4: 1rem; /* 16px */
  --calc-space-5: 1.25rem; /* 20px */
  --calc-space-6: 1.5rem; /* 24px */
  --calc-space-7: 1.875rem; /* 30px */
  --calc-space-8: 2rem; /* 32px */
  --calc-space-9: 2.25rem; /* 36px */
  --calc-space-10: 2.5rem; /* 40px */
  --calc-space-12: 3rem; /* 48px */
  --calc-space-15: 3.75rem; /* 60px */

  /* Primitive Typography Scale - Tailwind-like system */
  --calc-text-xs: 0.75rem; /* 12px */
  --calc-text-sm: 0.875rem; /* 14px */
  --calc-text-base: 1rem; /* 16px */
  --calc-text-lg: 1.125rem; /* 18px */
  --calc-text-xl: 1.25rem; /* 20px */
  --calc-text-2xl: 1.5rem; /* 24px */
  --calc-text-3xl: 1.75rem; /* 28px */
  --calc-text-4xl: 2.25rem; /* 36px */
  --calc-text-5xl: 3rem; /* 48px */
  --calc-text-6xl: 3.75rem; /* 60px */
  --calc-text-7xl: 4.5rem; /* 72px */
  --calc-text-8xl: 6rem; /* 96px */
  --calc-text-9xl: 8rem; /* 128px */

  /* Primitive Font Weights */
  --calc-weight-light: 300;
  --calc-weight-normal: 400;
  --calc-weight-medium: 500;
  --calc-weight-bold: 700;

  /* Primitive Line Heights */
  --calc-leading-none: 1;
  --calc-leading-tight: 1.1;
  --calc-leading-snug: 1.2;
  --calc-leading-normal: 1.3;
  --calc-leading-relaxed: 1.4;

  /* Primitive Border Radius - Tailwind-like system */
  --calc-radius-none: 0;
  --calc-radius-xs: 0.125rem; /* 2px */
  --calc-radius-sm: 0.25rem; /* 4px */
  --calc-radius-md: 0.375rem; /* 6px */
  --calc-radius-lg: 0.5rem; /* 8px */
  --calc-radius-xl: 0.75rem; /* 12px */
  --calc-radius-2xl: 1rem; /* 16px */
  --calc-radius-3xl: 1.5rem; /* 24px */
  --calc-radius-4xl: 2rem; /* 32px */
  --calc-radius-full: 50px;

  /* Primitive Shadows */
  --calc-shadow-default: 0 10px 20px hsl(0deg 0% 0% / 15%), 0 2px 4px hsl(0deg 0% 0% / 15%);

  /* Primitive Transitions */
  --calc-transition-fast: all 0.1s linear;
  --calc-transition-medium: all 0.2s linear;
  --calc-transition-default: all 0.3s ease;
  --calc-transition-colors: color 0.25s ease;
  --calc-transition-transform: transform 0.3s ease;

  /* Primitive Sizes */
  --calc-size-1: 1rem; /* 16px */
  --calc-size-2: 1.0625rem; /* 17px */
  --calc-size-3: 1.125rem; /* 18px */
  --calc-size-4: 1.1875rem; /* 19px */
  --calc-size-5: 1.25rem; /* 20px */
  --calc-size-6: 1.5rem;
  --calc-size-7: 1.85rem;
  --calc-size-8: 2rem;

  /* Primitive Font Families */
  --calc-font-sans:
    'Roboto Condensed', system-ui, -apple-system, blinkmacsystemfont, 'Segoe UI', roboto, oxygen, ubuntu, cantarell,
    'Open Sans', 'Helvetica Neue', sans-serif;

  /* ===== LAYER 2: SEMANTIC TOKENS ===== */

  /* Shared Brand Colors - Uses TypoScript constants with fallbacks to primitive tokens */
  --calc-brand-primary: var(--calc-typo3-primary, var(--calc-purple-500));
  --calc-brand-primary-hover: var(--calc-typo3-primary-hover, var(--calc-purple-600));
  --calc-brand-accent: var(--calc-typo3-accent, var(--calc-green-400));

  /* Shared Base Colors */
  --calc-color-text-primary: var(--calc-gray-900);
  --calc-color-text-secondary: var(--calc-gray-600);
  --calc-color-text-tertiary: var(--calc-gray-400);
  --calc-color-text-on-brand: var(--calc-typo3-text-on-brand, var(--calc-white));
  --calc-color-text-on-brand-hover: var(--calc-typo3-text-on-brand-hover, var(--calc-white));
  --calc-color-text-error: var(--calc-red-400);

  /* Shared Surface Colors */
  --calc-surface-background: white;
  --calc-surface-card: var(--calc-white);

  /* Shared Font Family */
  --calc-font-primary: var(--calc-font-sans);

  /* ===== INPUT COMPONENT TOKENS ===== */

  /* Input Text Colors */
  --calc-input-color-text-form: var(--calc-gray-600);

  /* Input Surface Colors */
  --calc-input-surface-input: var(--calc-gray-100);

  /* Input Border Colors */
  --calc-input-border-default: var(--calc-gray-300);
  --calc-input-border-transparent: var(--calc-transparent);

  /* Input Typography */
  --calc-input-text-tab: var(--calc-text-base);
  --calc-input-text-tab-large: var(--calc-text-3xl);
  --calc-input-text-form-label: var(--calc-text-sm);
  --calc-input-text-form-input: var(--calc-text-lg);
  --calc-input-text-form-select: var(--calc-text-xl);
  --calc-input-text-error-message: var(--calc-text-sm);
  --calc-input-text-button: var(--calc-text-3xl);

  /* Input Font Weights */
  --calc-input-weight-body: var(--calc-weight-normal);
  --calc-input-weight-tab: var(--calc-weight-light);

  /* Input Line Heights */
  --calc-input-line-compact: var(--calc-leading-none);
  --calc-input-line-form: var(--calc-leading-none);
  --calc-input-line-button: var(--calc-leading-normal);
  --calc-input-line-disclaimer: var(--calc-leading-snug);

  /* Input Spacing */
  --calc-input-space-layout-gap: var(--calc-space-5);
  --calc-input-space-card-padding: var(--calc-space-4);
  --calc-input-space-input-padding: var(--calc-space-5);
  --calc-input-space-button-padding-x: var(--calc-space-7);
  --calc-input-space-button-padding-y: var(--calc-space-3);
  --calc-input-space-element-gap: var(--calc-space-2);
  --calc-input-space-element-gap-large: var(--calc-space-4);
  --calc-input-space-tab-gap: var(--calc-space-3);
  --calc-input-space-header-height: var(--calc-space-10);
  --calc-input-space-header-height-large: var(--calc-space-15);
  --calc-input-space-micro: var(--calc-space-1);
  --calc-input-space-form-margin: var(--calc-space-2);
  --calc-input-space-error-padding-x: var(--calc-space-3);
  --calc-input-space-error-padding-y: var(--calc-space-2);

  /* Input Border Radius */
  --calc-input-radius-input: var(--calc-radius-xl);
  --calc-input-radius-button: var(--calc-radius-full);
  --calc-input-radius-error: var(--calc-radius-lg);
  --calc-input-radius-tab: var(--calc-radius-3xl);

  /* Input Shadows */
  --calc-input-shadow-card: var(--calc-shadow-default);

  /* Input Transitions */
  --calc-input-transition-ui: var(--calc-transition-default);
  --calc-input-transition-ui-fast: var(--calc-transition-fast);
  --calc-input-transition-ui-medium: var(--calc-transition-medium);
  --calc-input-transition-color: var(--calc-transition-colors);
  --calc-input-transition-hover: var(--calc-transition-transform);

  /* Input Sizes */
  --calc-input-size-checkbox: var(--calc-size-1);
  --calc-input-size-icon: var(--calc-size-5);

  /* ===== OUTPUT COMPONENT TOKENS ===== */

  /* Output Typography */
  --calc-output-text-heading: var(--calc-text-3xl);
  --calc-output-text-price: var(--calc-text-4xl);
  --calc-output-text-body: var(--calc-text-base);
  --calc-output-text-body-large: var(--calc-text-lg);
  --calc-output-text-button: var(--calc-text-xl);
  --calc-output-text-disclaimer: var(--calc-text-sm);
  --calc-output-text-comparison: var(--calc-text-sm);

  /* Output Font Weights */
  --calc-output-weight-heading: var(--calc-weight-medium);
  --calc-output-weight-price: var(--calc-weight-bold);
  --calc-output-weight-body: var(--calc-weight-normal);
  --calc-output-weight-button: var(--calc-weight-normal);

  /* Output Line Heights */
  --calc-output-line-heading: var(--calc-leading-snug);
  --calc-output-line-price: var(--calc-leading-tight);
  --calc-output-line-body: var(--calc-leading-relaxed);
  --calc-output-line-badge: var(--calc-leading-none);
  --calc-output-line-button: var(--calc-leading-relaxed);
  --calc-output-line-disclaimer: var(--calc-leading-normal);
  --calc-output-line-downloads: var(--calc-leading-none);
  --calc-output-line-properties: var(--calc-leading-normal);

  /* Output Spacing */
  --calc-output-space-layout-gap: var(--calc-space-5);
  --calc-output-space-layout-gap-large: var(--calc-space-7);
  --calc-output-space-section-gap: var(--calc-space-12);
  --calc-output-space-card-padding: var(--calc-space-4);
  --calc-output-space-card-padding-large: var(--calc-space-8);
  --calc-output-space-input-padding: var(--calc-space-5);
  --calc-output-space-button-padding-x: var(--calc-space-7);
  --calc-output-space-button-padding-y: var(--calc-space-3);
  --calc-output-space-element-gap: var(--calc-space-2);
  --calc-output-space-element-gap-large: var(--calc-space-4);
  --calc-output-space-detail-gap: var(--calc-space-3);
  --calc-output-space-recommendation-height: var(--calc-space-12);
  --calc-output-space-recommendation-padding-x: var(--calc-space-6);
  --calc-output-space-recommendation-padding-y: var(--calc-space-4);
  --calc-output-space-icon-margin: var(--calc-space-2);

  /* Output Border Radius */
  --calc-output-radius-card: var(--calc-radius-3xl);
  --calc-output-radius-button: var(--calc-radius-full);

  /* Output Shadows */
  --calc-output-shadow-card: var(--calc-shadow-default);

  /* Output Transitions */
  --calc-output-transition-ui: var(--calc-transition-default);
  --calc-output-transition-ui-fast: var(--calc-transition-fast);
  --calc-output-transition-ui-medium: var(--calc-transition-medium);
  --calc-output-transition-color: var(--calc-transition-colors);
  --calc-output-transition-hover: var(--calc-transition-transform);

  /* Output Sizes */
  --calc-output-size-icon: var(--calc-size-5);
}