/* ServiceHub Redesign 00 - Token foundation (warm/edel). REIN OPTISCH.
   Mappt die App-Tokens (elmetic, color, bg, surface, text, font, radius, shadow)
   auf die warme Palette des neuen Design-Systems. Laedt zuletzt, gewinnt die Kaskade.
   WICHTIG: :root ist die ERSTE Regel (kein vorangestelltes @import), ASCII-Kommentare,
   damit der Token-Block garantiert geparst wird. Fonts kommen aus 01/02 + sind geladen.
   Light + Dark via [data-theme="dark"]. Sidebar/Header bleiben dem Shell-Agent ueberlassen. */

:root {
  /* Marken-/Status-Akzente */
  --accent: var(--sh-brand, #E73D25);
  --accent-700: var(--sh-brand-700, #C5331E);
  --accent-600: var(--sh-brand-600, #D6371F);
  --accent-soft: #FCEDE7;
  --accent-line: rgba(231, 61, 37, .22);
  --honey: #D99A2B;
  --honey-soft: #FBF0DA;
  --ok: #16A34A;
  --ok-soft: #E9F8EF;
  --warn: #C7791A;
  --warn-soft: #FBF1E0;
  --info: #2F6BD6;
  --info-soft: #EAF1FC;
  --violet: #7C5BD6;
  --violet-soft: #F0ECFB;
  --ink: #231C17;

  /* ELMETIC-Marken-Tokens */
  --elmetic-red: var(--sh-brand, #E73D25);
  --elmetic-accent: var(--sh-brand, #E73D25);
  --elmetic-accent-hover: var(--sh-brand-700, #C5331E);
  --elmetic-accent-dim: rgba(231, 61, 37, .10);
  --elmetic-accent-border: rgba(231, 61, 37, .22);
  --elmetic-accent-light: #FCEDE7;
  --elmetic-red-dark: var(--sh-brand-700, #C5331E);
  --elmetic-red-glow: rgba(231, 61, 37, .18);

  /* ELMETIC-Neutrale */
  --elmetic-bg: #FAF6F2;
  --elmetic-bg-soft: #F6F1EB;
  --elmetic-card: #FFFFFF;
  --elmetic-card-soft: #FBF8F4;
  --elmetic-surface: #F6F1EB;
  --elmetic-surface-alt: #EFE8E0;
  --elmetic-border: #EEE5DC;
  --elmetic-border-strong: #E3D9CE;
  --elmetic-text: #231C17;
  --elmetic-text-2: #463D35;
  --elmetic-muted: #9A8F84;
  --elmetic-muted-2: #6B6157;
  --elmetic-grey: #9A8F84;
  --elmetic-gray: #9A8F84;
  --elmetic-dark: #231C17;
  --elmetic-white: #FFFFFF;

  /* ELMETIC-Feedback */
  --elmetic-success: #16A34A;
  --elmetic-success-bg: #E9F8EF;
  --elmetic-warning: #C7791A;
  --elmetic-warning-bg: #FBF1E0;
  --elmetic-danger: #DC2626;
  --elmetic-danger-bg: #FCEDE7;
  --elmetic-info: #2F6BD6;
  --elmetic-info-bg: #EAF1FC;
  --elmetic-neutral-bg: #F6F1EB;

  /* Abgeleitete --color-* */
  --color-bg: #FAF6F2;
  --color-surface: #FFFFFF;
  --color-surface-alt: #F6F1EB;
  --color-border: #EEE5DC;
  --color-border-strong: #E3D9CE;
  --color-border-focus: var(--sh-brand, #E73D25);
  --color-text: #231C17;
  --color-text-secondary: #463D35;
  --color-text-muted: #9A8F84;
  --color-text-inverse: #FFFFFF;
  --color-success: #16A34A;
  --color-success-bg: #E9F8EF;
  --color-success-text: #166534;
  --color-warning: #C7791A;
  --color-warning-bg: #FBF1E0;
  --color-warning-text: #92400E;
  --color-error: #DC2626;
  --color-error-bg: #FCEDE7;
  --color-error-text: #991B1B;
  --color-info: #2F6BD6;
  --color-info-bg: #EAF1FC;
  --color-info-text: #1E40AF;
  --color-primary: var(--sh-brand, #E73D25);
  --color-primary-hover: var(--sh-brand-700, #C5331E);

  /* Kurz-Aliasse */
  --bg: #FAF6F2;
  --bg-subtle: #FAF6F2;
  --surface: #FFFFFF;
  --surface-alt: #F6F1EB;
  --border: #EEE5DC;
  --muted: #9A8F84;
  --text: #231C17;
  --text-muted: #6B6157;
  --primary: var(--sh-brand, #E73D25);
  --accent-color: var(--sh-brand, #E73D25);
  --accent-dark: var(--sh-brand-700, #C5331E);

  /* Typografie */
  --font-head: 'Space Grotesk', 'Figtree', system-ui, sans-serif;
  --font-body: 'Figtree', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-sans: 'Figtree', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-family-base: 'Figtree', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'Space Mono', 'JetBrains Mono', ui-monospace, monospace;

  /* Radien */
  --r-xs: 7px;
  --r-sm: 9px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-pill: 999px;
  --radius-sm: 7px;
  --radius: 9px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;
  --form-border-radius: 9px;
  --sh-radius-xs: 7px;
  --sh-radius-sm: 9px;
  --sh-radius-md: 12px;
  --sh-radius-lg: 16px;
  --sh-radius-xl: 20px;

  /* Schatten (warm) */
  --sh-sm: 0 1px 2px rgba(120, 80, 50, .06);
  --sh-md: 0 6px 20px rgba(120, 80, 50, .07), 0 1px 2px rgba(120, 80, 50, .05);
  --sh-lg: 0 18px 44px rgba(120, 80, 50, .14);
  --sh-pop: 0 12px 32px rgba(60, 40, 25, .18);
  --sh-accent: 0 5px 14px rgba(231, 61, 37, .28);
  --shadow-xs: 0 1px 2px rgba(120, 80, 50, .05);
  --shadow-sm: 0 1px 2px rgba(120, 80, 50, .06);
  --shadow: 0 1px 3px rgba(120, 80, 50, .08), 0 1px 2px rgba(120, 80, 50, .06);
  --shadow-md: 0 6px 20px rgba(120, 80, 50, .07), 0 1px 2px rgba(120, 80, 50, .05);
  --shadow-lg: 0 18px 44px rgba(120, 80, 50, .14);
  --shadow-xl: 0 24px 52px rgba(120, 80, 50, .16);
  --sh-shadow-sm: 0 1px 2px rgba(120, 80, 50, .06);
  --sh-shadow-md: 0 6px 20px rgba(120, 80, 50, .07), 0 1px 2px rgba(120, 80, 50, .05);
  --sh-shadow-lg: 0 18px 44px rgba(120, 80, 50, .14);

  /* Fokus + Transition */
  --ring: 0 0 0 3px var(--accent-soft);
  --focus-ring: 0 0 0 3px rgba(231, 61, 37, .15);
  --tr: .16s cubic-bezier(.2, .7, .3, 1);
}

[data-theme="dark"] {
  --accent: var(--sh-brand, #E73D25);
  --accent-700: var(--sh-brand-700, #C5331E);
  --accent-600: var(--sh-brand-600, #D6371F);
  --accent-soft: rgba(242, 84, 59, .16);
  --accent-line: rgba(242, 84, 59, .30);
  --honey: #E6AE4A;
  --honey-soft: rgba(230, 174, 74, .16);
  --ok: #3BC07A;
  --ok-soft: rgba(59, 192, 122, .15);
  --warn: #E5A33C;
  --warn-soft: rgba(229, 163, 60, .15);
  --info: #5C8FE8;
  --info-soft: rgba(92, 143, 232, .16);
  --violet: #9D82E6;
  --violet-soft: rgba(157, 130, 230, .16);
  --ink: #F6F1EC;

  --elmetic-red: var(--sh-brand, #E73D25);
  --elmetic-accent: var(--sh-brand, #E73D25);
  --elmetic-accent-hover: var(--sh-brand-700, #C5331E);
  --elmetic-accent-dim: rgba(242, 84, 59, .16);
  --elmetic-accent-border: rgba(242, 84, 59, .30);
  --elmetic-accent-light: rgba(242, 84, 59, .16);
  --elmetic-red-dark: var(--sh-brand-700, #C5331E);
  --elmetic-red-glow: rgba(242, 84, 59, .22);

  --elmetic-bg: #15120F;
  --elmetic-bg-soft: #241F1A;
  --elmetic-card: #1E1A16;
  --elmetic-card-soft: #241F1A;
  --elmetic-surface: #241F1A;
  --elmetic-surface-alt: #2C2620;
  --elmetic-border: #2E2822;
  --elmetic-border-strong: #3A332B;
  --elmetic-text: #F6F1EC;
  --elmetic-text-2: #E2D8CE;
  --elmetic-muted: #8C8175;
  --elmetic-muted-2: #B3A99E;
  --elmetic-grey: #8C8175;
  --elmetic-gray: #8C8175;
  --elmetic-dark: #F6F1EC;
  --elmetic-white: #1E1A16;

  --elmetic-success: #3BC07A;
  --elmetic-success-bg: rgba(59, 192, 122, .15);
  --elmetic-warning: #E5A33C;
  --elmetic-warning-bg: rgba(229, 163, 60, .15);
  --elmetic-danger: var(--sh-brand, #E73D25);
  --elmetic-danger-bg: rgba(242, 84, 59, .16);
  --elmetic-info: #5C8FE8;
  --elmetic-info-bg: rgba(92, 143, 232, .16);
  --elmetic-neutral-bg: #241F1A;

  --color-bg: #15120F;
  --color-surface: #1E1A16;
  --color-surface-alt: #241F1A;
  --color-border: #2E2822;
  --color-border-strong: #3A332B;
  --color-border-focus: var(--sh-brand, #E73D25);
  --color-text: #F6F1EC;
  --color-text-secondary: #E2D8CE;
  --color-text-muted: #8C8175;
  --color-text-inverse: #15120F;
  --color-success: #3BC07A;
  --color-success-bg: rgba(59, 192, 122, .15);
  --color-success-text: #BDF0D2;
  --color-warning: #E5A33C;
  --color-warning-bg: rgba(229, 163, 60, .15);
  --color-warning-text: #F4D9A8;
  --color-error: var(--sh-brand, #E73D25);
  --color-error-bg: rgba(242, 84, 59, .16);
  --color-error-text: #F8C3B8;
  --color-info: #5C8FE8;
  --color-info-bg: rgba(92, 143, 232, .16);
  --color-info-text: #C3D6F4;
  --color-primary: var(--sh-brand, #E73D25);
  --color-primary-hover: var(--sh-brand-700, #C5331E);

  --bg: #15120F;
  --bg-subtle: #15120F;
  --surface: #1E1A16;
  --surface-alt: #241F1A;
  --border: #2E2822;
  --muted: #8C8175;
  --text: #F6F1EC;
  --text-muted: #B3A99E;
  --primary: var(--sh-brand, #E73D25);
  --accent-color: var(--sh-brand, #E73D25);
  --accent-dark: var(--sh-brand-700, #C5331E);

  --sh-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --sh-md: 0 6px 20px rgba(0, 0, 0, .35), 0 1px 2px rgba(0, 0, 0, .4);
  --sh-lg: 0 18px 44px rgba(0, 0, 0, .5);
  --sh-pop: 0 12px 32px rgba(0, 0, 0, .55);
  --sh-accent: 0 5px 14px rgba(242, 84, 59, .30);
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow: 0 1px 3px rgba(0, 0, 0, .45), 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-md: 0 6px 20px rgba(0, 0, 0, .35), 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-lg: 0 18px 44px rgba(0, 0, 0, .5);
  --shadow-xl: 0 24px 52px rgba(0, 0, 0, .55);
  --sh-shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --sh-shadow-md: 0 6px 20px rgba(0, 0, 0, .35), 0 1px 2px rgba(0, 0, 0, .4);
  --sh-shadow-lg: 0 18px 44px rgba(0, 0, 0, .5);
  --ring: 0 0 0 3px var(--accent-soft);
  --focus-ring: 0 0 0 3px rgba(242, 84, 59, .22);
}

/* Schrift-Grundlagen (nur font-family, kein Layout) */
body {
  font-family: var(--font-body);
}

h1, h2, h3, h4,
.page-header h1, .page-title, .sh-page-title, .sh-header__left h1 {
  font-family: var(--font-head);
  letter-spacing: -.01em;
}