/* ═══════════════════════════════════════════════════════════════════════════
   Design Tokens — Color — Essig Elektro v2

   Orange (energy / action) + Teal (precision / trust).
   Dual-primary palette — neither is secondary.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {

  /* ── Safety Orange (Primary — Energy / Action) ──────────────────────── */

  --color-orange-50:  hsl(14 85% 96%);
  --color-orange-100: hsl(14 85% 90%);
  --color-orange-200: hsl(14 85% 82%);
  --color-orange-300: hsl(14 85% 70%);
  --color-orange-400: hsl(14 85% 60%);
  --color-orange-500: hsl(14 85% 52%);   /* Base — safety orange */
  --color-orange-600: hsl(14 80% 42%);
  --color-orange-700: hsl(14 75% 32%);
  --color-orange-800: hsl(14 70% 22%);
  --color-orange-900: hsl(14 65% 12%);

  /* ── Navy-Blue (Co-Primary — Precision / Technology) ───────────────── */

  --color-teal-50:  hsl(198 25% 95%);
  --color-teal-100: hsl(198 28% 88%);
  --color-teal-200: hsl(198 30% 78%);
  --color-teal-300: hsl(198 35% 60%);
  --color-teal-400: hsl(198 40% 42%);
  --color-teal-500: hsl(198 48% 28%);
  --color-teal-600: hsl(198 55% 20%);
  --color-teal-700: hsl(198 62% 16%);
  --color-teal-800: hsl(198 70% 13%);
  --color-teal-900: hsl(198 80% 10%);    /* #002230 — brand navy */

  /* ── Neutrals — Cool blue-tinted grays ──────────────────────────────── */

  --color-neutral-50:  hsl(220 5% 98%);
  --color-neutral-100: hsl(220 5% 94%);
  --color-neutral-200: hsl(220 4% 88%);
  --color-neutral-300: hsl(220 3% 78%);
  --color-neutral-400: hsl(220 3% 58%);
  --color-neutral-500: hsl(220 4% 40%);
  --color-neutral-600: hsl(220 4% 35%);
  --color-neutral-700: hsl(220 5% 22%);
  --color-neutral-800: hsl(220 6% 12%);
  --color-neutral-900: hsl(220 8% 6%);

  /* ── Legacy Primary Aliases (backward compat) ───────────────────────── */

  --color-primary-50:  var(--color-orange-50);
  --color-primary-100: var(--color-orange-100);
  --color-primary-200: var(--color-orange-200);
  --color-primary-300: var(--color-orange-300);
  --color-primary-400: var(--color-orange-400);
  --color-primary-500: var(--color-orange-500);
  --color-primary-600: var(--color-orange-600);
  --color-primary-700: var(--color-orange-700);
  --color-primary-800: var(--color-orange-800);
  --color-primary-900: var(--color-orange-900);

  /* ── Surfaces ──────────────────────────────────────────────────────── */

  --color-surface-light:    hsl(220 10% 96%);     /* Cool blueprint — body bg */
  --color-surface-warm:     hsl(220 8% 93%);      /* Deeper — subtle depth */
  --color-surface-muted:    hsl(220 5% 99%);      /* Near white — cards, alternating sections */
  --color-surface-teal:     var(--color-teal-50);  /* Teal-tinted section bg */
  --color-surface-teal-alt: var(--color-teal-100); /* Slightly stronger teal bg */
  --color-surface-dark:     var(--color-teal-800); /* Deep teal dark surface */
  --color-surface-darker:   var(--color-teal-900); /* Darkest teal */

  /* ── Gradients ──────────────────────────────────────────────────────── */

  --gradient-brand:       linear-gradient(135deg, var(--color-orange-500), var(--color-teal-500));
  --gradient-brand-subtle: linear-gradient(135deg, hsl(14 85% 52% / 0.12), hsl(198 40% 42% / 0.08));
  --gradient-dark:         linear-gradient(180deg, var(--color-teal-700), var(--color-teal-900));
  --gradient-glow:         radial-gradient(ellipse at center, var(--color-orange-400) 0%, transparent 70%);

  /* ── Text ──────────────────────────────────────────────────────────── */

  --color-text-primary:   var(--color-neutral-900);
  --color-text-secondary: var(--color-neutral-600);
  /* Gedämpfter Text: dunkelster Grauton, der auf --color-surface-light
     (#f4f4f6) noch WCAG AA erreicht. neutral-400 (58%) erreichte dort nur
     2,8:1 — gemessen am 23.09.2026 an Referenz-, Kontakt-, Job- und
     Formular-Labels sowie am Cookie-Hinweis. */
  --color-text-muted:     var(--color-neutral-500);
  --color-text-inverse:   hsl(0 0% 100%);
  --color-text-teal:      var(--color-teal-600);
  --color-text-orange:    var(--color-orange-600);

  /* ── Borders ───────────────────────────────────────────────────────── */

  --color-border-default: var(--color-neutral-200);
  --color-border-light:   var(--color-neutral-100);
  --color-border-teal:    hsl(198 20% 28%);
  --color-border-teal-subtle: hsl(198 20% 22%);

  /* ── Selection ─────────────────────────────────────────────────────── */

  --color-selection-bg:   hsl(14 85% 52% / 0.22);
  --color-selection-text: var(--color-text-primary);

  /* ── States ────────────────────────────────────────────────────────── */

  --color-state-success: hsl(155 55% 36%);
  --color-state-warning: hsl(38 85% 46%);
  --color-state-error:   hsl(4 65% 48%);
  --color-state-info:    hsl(205 55% 46%);

  /* ── Global Radius ─────────────────────────────────────────────────── */

  --radius-sm:   0;
  --radius-md:   0;
  --radius-lg:   0;
  --radius-full: 0;
  --radius-none: 0;
}

::selection {
  background-color: var(--color-selection-bg);
  color: var(--color-selection-text);
}