/* HLSW Design Tokens v2.2.0 — generiert aus tokens/design-tokens.json. NICHT VON HAND BEARBEITEN. */

:root {
  /* --- Primitive --- */
  --navy-50: #F2F6FB;
  --navy-100: #E3EAF4;
  --navy-200: #C4D2E6;
  --navy-300: #9AB0D0;
  --navy-400: #6785B0;
  --navy-500: #3F6291;
  --navy-600: #2A4A73;
  --navy-700: #1B3559;
  --navy-800: #0F2440;
  --navy-900: #0A192E;
  --navy-950: #050D18;

  --amber-50: #FFFBEB;
  --amber-100: #FEF3C7;
  --amber-200: #FDE68A;
  --amber-300: #FCD34D;
  --amber-400: #FBBF24;
  --amber-500: #F59E0B;
  --amber-600: #D97706;
  --amber-700: #B45309;
  --amber-800: #92400E;
  --amber-900: #78350F;

  --grey-0: #FFFFFF;
  --grey-50: #F8FAFC;
  --grey-100: #F1F5F9;
  --grey-200: #E2E8F0;
  --grey-300: #CBD5E1;
  --grey-400: #94A3B8;
  --grey-500: #64748B;
  --grey-600: #475569;
  --grey-700: #334155;
  --grey-800: #1E293B;
  --grey-900: #0F172A;

  /* --- Schriftfamilien --- */
  --font-display: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Inter', 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'Cascadia Mono', Consolas, monospace;
  --font-office: Segoe UI, Calibri, Arial, sans-serif;

  /* --- Typo-Skala --- */
  --type-display-xl: 700 56px/1.05 var(--font-display);
  --tracking-display-xl: -0.022em;
  --type-display-lg: 700 44px/1.08 var(--font-display);
  --tracking-display-lg: -0.02em;
  --type-h1: 700 34px/1.15 var(--font-display);
  --tracking-h1: -0.018em;
  --type-h2: 700 26px/1.22 var(--font-display);
  --tracking-h2: -0.014em;
  --type-h3: 600 21px/1.3 var(--font-display);
  --tracking-h3: -0.01em;
  --type-h4: 600 18px/1.4 var(--font-body);
  --tracking-h4: 0;
  --type-body-lg: 400 18px/1.6 var(--font-body);
  --tracking-body-lg: 0;
  --type-body: 400 16px/1.65 var(--font-body);
  --tracking-body: 0;
  --type-body-sm: 400 14px/1.6 var(--font-body);
  --tracking-body-sm: 0;
  --type-caption: 400 13px/1.5 var(--font-body);
  --tracking-caption: 0.005em;
  --type-overline: 600 12px/1.4 var(--font-body);
  --tracking-overline: 0.14em;
  --type-mono: 400 14px/1.55 var(--font-mono);
  --tracking-mono: 0;
  --measure: 68ch;
  --measure-compact: 58ch;

  /* --- Abstände --- */
  --space-0: 0;
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 8px;
  --space-4: 12px;
  --space-5: 16px;
  --space-6: 20px;
  --space-7: 24px;
  --space-8: 32px;
  --space-9: 40px;
  --space-10: 48px;
  --space-11: 64px;
  --space-12: 80px;
  --space-13: 96px;
  --space-14: 128px;

  /* --- Radien --- */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-2xl: 28px;
  --radius-full: 9999px;

  /* --- Layout --- */
  --container-max: 1180px;
  --content-max: 760px;
  --gutter: 24px;

  /* --- Bewegung --- */
  --dur-instant: 80ms;
  --dur-fast: 140ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-decelerate: cubic-bezier(0, 0, 0, 1);
  --ease-accelerate: cubic-bezier(0.3, 0, 1, 1);

  /* --- Semantische Tokens: LIGHT (Standard) --- */
  --bg: #FFFFFF;
  --bg-subtle: #F8FAFC;
  --bg-inset: #F1F5F9;
  --surface: #FFFFFF;
  --surface-raised: #FFFFFF;
  --border: #E2E8F0;
  --border-strong: #CBD5E1;
  --border-interactive: #7C8CA1;
  --text: #0A192E;
  --text-body: #334155;
  --text-muted: #64748B;
  --text-inverse: #FFFFFF;
  --accent: #F59E0B;
  --accent-hover: #D97706;
  --accent-text: #B45309;
  --accent-on: #050D18;
  --accent-subtle: #FFFBEB;
  --accent-border: #FDE68A;
  --primary: #0F2440;
  --primary-hover: #1B3559;
  --primary-on: #FFFFFF;
  --focus-ring: rgba(180, 83, 9, 0.55);
  --ring: 0 0 0 3px var(--focus-ring);

  --success: #15803D;
  --success-strong: #166534;
  --success-surface: #F0FDF4;
  --success-border: #BBF7D0;
  --warning: #B45309;
  --warning-strong: #92400E;
  --warning-surface: #FFFBEB;
  --warning-border: #FDE68A;
  --danger: #B91C1C;
  --danger-strong: #991B1B;
  --danger-surface: #FEF2F2;
  --danger-border: #FECACA;
  --info: #1D4ED8;
  --info-strong: #1E40AF;
  --info-surface: #EFF6FF;
  --info-border: #BFDBFE;

  /* --- Schatten --- */
  --shadow-sm: 0 1px 2px rgba(15,36,64,0.06), 0 1px 3px rgba(15,36,64,0.10);
  --shadow-md: 0 2px 4px rgba(15,36,64,0.06), 0 4px 12px rgba(15,36,64,0.10);
  --shadow-lg: 0 4px 8px rgba(15,36,64,0.06), 0 12px 28px rgba(15,36,64,0.12);
  --shadow-xl: 0 8px 16px rgba(15,36,64,0.08), 0 24px 48px rgba(15,36,64,0.16);
}

/* --- Semantische Tokens: DARK über Systemeinstellung --- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
  --bg: #050D18;
  --bg-subtle: #0A192E;
  --bg-inset: #0F2440;
  --surface: #0A192E;
  --surface-raised: #0F2440;
  --border: #1B3559;
  --border-strong: #2A4A73;
  --border-interactive: #5578AA;
  --text: #F1F5F9;
  --text-body: #CBD5E1;
  --text-muted: #94A3B8;
  --text-inverse: #050D18;
  --accent: #FBBF24;
  --accent-hover: #FCD34D;
  --accent-text: #FBBF24;
  --accent-on: #050D18;
  --accent-subtle: rgba(251, 191, 36, 0.12);
  --accent-border: rgba(251, 191, 36, 0.34);
  --primary: #F1F5F9;
  --primary-hover: #FFFFFF;
  --primary-on: #0A192E;
  --focus-ring: rgba(251, 191, 36, 0.6);
    --ring: 0 0 0 3px var(--focus-ring);

  --success: #4ADE80;
  --success-strong: #4ADE80;
  --success-surface: color-mix(in srgb, #4ADE80 14%, transparent);
  --success-border: color-mix(in srgb, #4ADE80 34%, transparent);
  --warning: #FCD34D;
  --warning-strong: #FCD34D;
  --warning-surface: color-mix(in srgb, #FCD34D 14%, transparent);
  --warning-border: color-mix(in srgb, #FCD34D 34%, transparent);
  --danger: #F87171;
  --danger-strong: #F87171;
  --danger-surface: color-mix(in srgb, #F87171 14%, transparent);
  --danger-border: color-mix(in srgb, #F87171 34%, transparent);
  --info: #7DD3FC;
  --info-strong: #7DD3FC;
  --info-surface: color-mix(in srgb, #7DD3FC 14%, transparent);
  --info-border: color-mix(in srgb, #7DD3FC 34%, transparent);

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.40);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.45);
  --shadow-lg: 0 12px 28px rgba(0,0,0,0.50);
  --shadow-xl: 0 24px 48px rgba(0,0,0,0.55);
  }
}

/* --- Semantische Tokens: DARK explizit gewählt --- */
:root[data-theme="dark"] {
  --bg: #050D18;
  --bg-subtle: #0A192E;
  --bg-inset: #0F2440;
  --surface: #0A192E;
  --surface-raised: #0F2440;
  --border: #1B3559;
  --border-strong: #2A4A73;
  --border-interactive: #5578AA;
  --text: #F1F5F9;
  --text-body: #CBD5E1;
  --text-muted: #94A3B8;
  --text-inverse: #050D18;
  --accent: #FBBF24;
  --accent-hover: #FCD34D;
  --accent-text: #FBBF24;
  --accent-on: #050D18;
  --accent-subtle: rgba(251, 191, 36, 0.12);
  --accent-border: rgba(251, 191, 36, 0.34);
  --primary: #F1F5F9;
  --primary-hover: #FFFFFF;
  --primary-on: #0A192E;
  --focus-ring: rgba(251, 191, 36, 0.6);
  --ring: 0 0 0 3px var(--focus-ring);

  --success: #4ADE80;
  --success-strong: #4ADE80;
  --success-surface: color-mix(in srgb, #4ADE80 14%, transparent);
  --success-border: color-mix(in srgb, #4ADE80 34%, transparent);
  --warning: #FCD34D;
  --warning-strong: #FCD34D;
  --warning-surface: color-mix(in srgb, #FCD34D 14%, transparent);
  --warning-border: color-mix(in srgb, #FCD34D 34%, transparent);
  --danger: #F87171;
  --danger-strong: #F87171;
  --danger-surface: color-mix(in srgb, #F87171 14%, transparent);
  --danger-border: color-mix(in srgb, #F87171 34%, transparent);
  --info: #7DD3FC;
  --info-strong: #7DD3FC;
  --info-surface: color-mix(in srgb, #7DD3FC 14%, transparent);
  --info-border: color-mix(in srgb, #7DD3FC 34%, transparent);

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.40);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.45);
  --shadow-lg: 0 12px 28px rgba(0,0,0,0.50);
  --shadow-xl: 0 24px 48px rgba(0,0,0,0.55);
}

/* --- App-Akzente: setze data-app auf <html> --- */
[data-app="utility"] {
  --accent: #0F766E;
  --accent-hover: #0F766E;
  --accent-text: #0F766E;
  --accent-on: #FFFFFF;
  --accent-subtle: color-mix(in srgb, #0F766E 8%, #FFFFFF);
  --accent-border: color-mix(in srgb, #0F766E 28%, #FFFFFF);
  --focus-ring: color-mix(in srgb, #0F766E 55%, transparent);
}
[data-app="games"] {
  --accent: #7C3AED;
  --accent-hover: #7C3AED;
  --accent-text: #7C3AED;
  --accent-on: #FFFFFF;
  --accent-subtle: color-mix(in srgb, #7C3AED 8%, #FFFFFF);
  --accent-border: color-mix(in srgb, #7C3AED 28%, #FFFFFF);
  --focus-ring: color-mix(in srgb, #7C3AED 55%, transparent);
}
[data-app="b2b"] {
  --accent: #1D4ED8;
  --accent-hover: #1D4ED8;
  --accent-text: #1D4ED8;
  --accent-on: #FFFFFF;
  --accent-subtle: color-mix(in srgb, #1D4ED8 8%, #FFFFFF);
  --accent-border: color-mix(in srgb, #1D4ED8 28%, #FFFFFF);
  --focus-ring: color-mix(in srgb, #1D4ED8 55%, transparent);
}
[data-app="finance"] {
  --accent: #15803D;
  --accent-hover: #15803D;
  --accent-text: #15803D;
  --accent-on: #FFFFFF;
  --accent-subtle: color-mix(in srgb, #15803D 8%, #FFFFFF);
  --accent-border: color-mix(in srgb, #15803D 28%, #FFFFFF);
  --focus-ring: color-mix(in srgb, #15803D 55%, transparent);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"])[data-app="utility"] {
  --accent: #2DD4BF;
  --accent-hover: #2DD4BF;
  --accent-text: #2DD4BF;
  --accent-on: #050D18;
  --accent-subtle: color-mix(in srgb, #2DD4BF 14%, transparent);
  --accent-border: color-mix(in srgb, #2DD4BF 34%, transparent);
  --focus-ring: color-mix(in srgb, #2DD4BF 60%, transparent);
  }
  :root:not([data-theme="light"])[data-app="games"] {
  --accent: #A78BFA;
  --accent-hover: #A78BFA;
  --accent-text: #A78BFA;
  --accent-on: #050D18;
  --accent-subtle: color-mix(in srgb, #A78BFA 14%, transparent);
  --accent-border: color-mix(in srgb, #A78BFA 34%, transparent);
  --focus-ring: color-mix(in srgb, #A78BFA 60%, transparent);
  }
  :root:not([data-theme="light"])[data-app="b2b"] {
  --accent: #60A5FA;
  --accent-hover: #60A5FA;
  --accent-text: #60A5FA;
  --accent-on: #050D18;
  --accent-subtle: color-mix(in srgb, #60A5FA 14%, transparent);
  --accent-border: color-mix(in srgb, #60A5FA 34%, transparent);
  --focus-ring: color-mix(in srgb, #60A5FA 60%, transparent);
  }
  :root:not([data-theme="light"])[data-app="finance"] {
  --accent: #4ADE80;
  --accent-hover: #4ADE80;
  --accent-text: #4ADE80;
  --accent-on: #050D18;
  --accent-subtle: color-mix(in srgb, #4ADE80 14%, transparent);
  --accent-border: color-mix(in srgb, #4ADE80 34%, transparent);
  --focus-ring: color-mix(in srgb, #4ADE80 60%, transparent);
  }
}
:root[data-theme="dark"][data-app="utility"] {
  --accent: #2DD4BF;
  --accent-hover: #2DD4BF;
  --accent-text: #2DD4BF;
  --accent-on: #050D18;
  --accent-subtle: color-mix(in srgb, #2DD4BF 14%, transparent);
  --accent-border: color-mix(in srgb, #2DD4BF 34%, transparent);
  --focus-ring: color-mix(in srgb, #2DD4BF 60%, transparent);
}
:root[data-theme="dark"][data-app="games"] {
  --accent: #A78BFA;
  --accent-hover: #A78BFA;
  --accent-text: #A78BFA;
  --accent-on: #050D18;
  --accent-subtle: color-mix(in srgb, #A78BFA 14%, transparent);
  --accent-border: color-mix(in srgb, #A78BFA 34%, transparent);
  --focus-ring: color-mix(in srgb, #A78BFA 60%, transparent);
}
:root[data-theme="dark"][data-app="b2b"] {
  --accent: #60A5FA;
  --accent-hover: #60A5FA;
  --accent-text: #60A5FA;
  --accent-on: #050D18;
  --accent-subtle: color-mix(in srgb, #60A5FA 14%, transparent);
  --accent-border: color-mix(in srgb, #60A5FA 34%, transparent);
  --focus-ring: color-mix(in srgb, #60A5FA 60%, transparent);
}
:root[data-theme="dark"][data-app="finance"] {
  --accent: #4ADE80;
  --accent-hover: #4ADE80;
  --accent-text: #4ADE80;
  --accent-on: #050D18;
  --accent-subtle: color-mix(in srgb, #4ADE80 14%, transparent);
  --accent-border: color-mix(in srgb, #4ADE80 34%, transparent);
  --focus-ring: color-mix(in srgb, #4ADE80 60%, transparent);
}