/* ==========================================================================
   Easy Trans – Design Tokens
   3-tier architecture: global → semantic → component
   Komponenten referenzieren ausschließlich semantische oder Komponenten-Tokens.
   ========================================================================== */

:root {
  /* ---------- 1. Global / Reference ---------- */

  /* Petrol – Markenfarbe: Vertrauen, Ruhe, Seriosität */
  --petrol-50: #eef7f8;
  --petrol-100: #d4ecef;
  --petrol-200: #a9d8de;
  --petrol-300: #72bcc6;
  --petrol-400: #3f9aa8;
  --petrol-500: #1f7d8c;
  --petrol-600: #136473;
  --petrol-700: #0f505d;
  --petrol-800: #0c3f4a;
  --petrol-900: #082c34;
  --petrol-950: #051d22;

  /* Amber – Akzent: Wärme, Bewegung, Handlung */
  --amber-50: #fff8eb;
  --amber-100: #ffecc7;
  --amber-200: #ffd78a;
  --amber-300: #ffbf4d;
  --amber-400: #ffa924;
  --amber-500: #f28c0b;
  --amber-600: #d26a06;
  --amber-700: #ad4c09;

  /* Neutral – leicht warmes Grau */
  --neutral-0: #ffffff;
  --neutral-25: #fbfaf8;
  --neutral-50: #f6f5f2;
  --neutral-100: #ecebe7;
  --neutral-200: #dcdad4;
  --neutral-300: #c2bfb7;
  --neutral-400: #9a968c;
  --neutral-500: #737067;
  --neutral-600: #57544d;
  --neutral-700: #403e39;
  --neutral-800: #2a2925;
  --neutral-900: #1a1917;

  --green-600: #1c7c4a;
  --green-50: #ebf7f0;
  --red-600: #b42318;
  --red-50: #fef3f2;

  /* Spacing – 4px-Basis */
  --space-1: 0.25rem;  /* 4  */
  --space-2: 0.5rem;   /* 8  */
  --space-3: 0.75rem;  /* 12 */
  --space-4: 1rem;     /* 16 */
  --space-5: 1.25rem;  /* 20 */
  --space-6: 1.5rem;   /* 24 */
  --space-8: 2rem;     /* 32 */
  --space-10: 2.5rem;  /* 40 */
  --space-12: 3rem;    /* 48 */
  --space-16: 4rem;    /* 64 */
  --space-20: 5rem;    /* 80 */
  --space-24: 6rem;    /* 96 */

  /* Typografie – System-Fonts (keine externen Requests → DSGVO-freundlich) */
  --font-family-sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI Variable", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-family-display: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "Segoe UI Variable Display", "Segoe UI", Roboto, sans-serif;

  /* Type-Scale – Major Third (1.25), fluid für Headlines */
  --font-size-100: 0.8125rem;  /* 13 */
  --font-size-200: 0.875rem;   /* 14 */
  --font-size-300: 1rem;       /* 16 */
  --font-size-400: 1.125rem;   /* 18 */
  --font-size-500: 1.25rem;    /* 20 */
  --font-size-600: clamp(1.375rem, 1.2rem + 0.8vw, 1.625rem);
  --font-size-700: clamp(1.75rem, 1.4rem + 1.6vw, 2.375rem);
  --font-size-800: clamp(2.25rem, 1.6rem + 3vw, 3.75rem);

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-black: 800;

  --line-height-tight: 1.1;
  --line-height-snug: 1.3;
  --line-height-normal: 1.6;

  --radius-sm: 0.5rem;
  --radius-md: 0.875rem;
  --radius-lg: 1.25rem;
  --radius-xl: 1.75rem;
  --radius-full: 999px;

  --shadow-sm: 0 1px 2px rgb(8 44 52 / 0.06), 0 1px 3px rgb(8 44 52 / 0.08);
  --shadow-md: 0 4px 12px -2px rgb(8 44 52 / 0.08), 0 2px 4px -2px rgb(8 44 52 / 0.06);
  --shadow-lg: 0 20px 40px -12px rgb(8 44 52 / 0.18), 0 8px 16px -8px rgb(8 44 52 / 0.08);

  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 400ms;
  --easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --easing-emphasized: cubic-bezier(0.3, 0, 0, 1.2);

  --container-max: 72rem;
  --container-narrow: 48rem;

  /* ---------- 2. Semantic / Alias ---------- */

  --color-bg-page: var(--neutral-25);
  --color-bg-subtle: var(--neutral-50);
  --color-bg-surface: var(--neutral-0);
  --color-bg-brand: var(--petrol-800);
  --color-bg-brand-strong: var(--petrol-950);
  --color-bg-brand-subtle: var(--petrol-50);
  --color-bg-accent-subtle: var(--amber-50);

  --color-text-primary: var(--neutral-900);
  --color-text-secondary: var(--neutral-600);
  --color-text-muted: var(--neutral-500);
  --color-text-brand: var(--petrol-700);
  --color-text-on-brand: var(--neutral-0);
  --color-text-on-brand-muted: var(--petrol-100);
  --color-text-on-accent: var(--neutral-900);
  --color-text-accent: var(--amber-700);

  --color-border-default: var(--neutral-200);
  --color-border-strong: var(--neutral-300);
  --color-border-brand: var(--petrol-500);
  --color-border-on-brand: rgb(255 255 255 / 0.14);

  --color-action-primary: var(--amber-400);
  --color-action-primary-hover: var(--amber-300);
  --color-action-primary-active: var(--amber-500);
  --color-action-secondary: var(--petrol-700);
  --color-action-secondary-hover: var(--petrol-600);

  --color-focus-ring: var(--petrol-400);
  --color-feedback-success: var(--green-600);
  --color-feedback-success-bg: var(--green-50);
  --color-feedback-error: var(--red-600);
  --color-feedback-error-bg: var(--red-50);

  --space-inline-sm: var(--space-2);
  --space-inline-md: var(--space-4);
  --space-stack-sm: var(--space-3);
  --space-stack-md: var(--space-6);
  --space-stack-lg: var(--space-12);
  --space-section: clamp(var(--space-16), 10vw, var(--space-24));
  --space-gutter: clamp(var(--space-4), 4vw, var(--space-8));

  --font-heading: var(--font-family-display);
  --font-body: var(--font-family-sans);

  /* ---------- 3. Component ---------- */

  --button-radius: var(--radius-full);
  --button-padding-y: var(--space-3);
  --button-padding-x: var(--space-6);
  --button-bg-primary: var(--color-action-primary);
  --button-bg-primary-hover: var(--color-action-primary-hover);
  --button-text-primary: var(--color-text-on-accent);

  --card-bg: var(--color-bg-surface);
  --card-radius: var(--radius-lg);
  --card-padding: clamp(var(--space-5), 3vw, var(--space-8));
  --card-border: 1px solid var(--color-border-default);

  --input-height: 3rem;
  --input-radius: var(--radius-sm);
  --input-border: 1px solid var(--color-border-strong);
  --input-bg: var(--color-bg-surface);

  --header-height: 4.5rem;
}