/* ByteGleam Design System v1.1 — tokens (aus Claude-Design-Bundle übernommen, FontAwesome entfernt). Nicht von Hand ändern. */
@font-face{font-family:"Nexa";src:url("../fonts/Nexa-Light.otf") format("opentype");font-weight:300;font-display:swap;}
@font-face{font-family:"Nexa";src:url("../fonts/Nexa-Bold.otf") format("opentype");font-weight:700;font-display:swap;}
@font-face{font-family:"JetBrains Mono";src:url("../fonts/JetBrainsMono-Regular.ttf") format("truetype");font-weight:400;font-display:swap;}
/* ByteGleam color tokens — source: design-tokens.json v1.0.0
   v1.1 (2026-09): WCAG-AA-Kontrast-Revision. Neue theme-abhängige Text-/UI-Tokens
   (--accent-fg, --on-accent, --*-fg, --error-solid, --border-input, --focus-*).
   Rohwerte (--grad-*, --success …) bleiben für Flächen, Verläufe, Dots und Charts. */
:root{
  /* brand */
  --brand-dark:#050028;
  --grad-start:#ffa404;--grad-mid:#ff5e2b;--grad-end:#ff2a48;
  --grad-vert:linear-gradient(180deg,#ffa404 0%,#ff2a48 100%); /* @kind color */
  --grad-diag:linear-gradient(135deg,#ffa404 0%,#ff5e2b 45%,#ff2a48 100%); /* @kind color */
  --grad-subtle:linear-gradient(180deg,rgba(255,164,4,0.08) 0%,rgba(255,42,72,0.08) 100%); /* @kind color */
  --grad-dark-overlay:linear-gradient(180deg,rgba(5,0,40,0) 0%,rgba(5,0,40,0.95) 100%); /* @kind color */
  /* warm scale */
  --warm-300:#ff5e2b;--warm-500:#f15828;--warm-700:#c4441f;--warm-900:#782210;--warm-950:#2b0000;
  /* neutral scale */
  --neutral-0:#ffffff;--neutral-50:#f7f7fa;--neutral-100:#e9e9f0;--neutral-300:#b8b8c2;--neutral-500:#6b6b7a;--neutral-700:#2f2f3d;--neutral-900:#050028;
  /* semantic — raw hues: fills, dots, icons ≥ 3:1, charts. For TEXT use the --*-fg tokens below. */
  --success:#22c55e;--warning:#ffa404;--error:#ff2a48;--info:#3b82f6;
  /* chart series (fixed order) */
  --chart-1:#ff5e2b;--chart-2:#ffa404;--chart-3:#3b82f6;
}
/* Theme surfaces — Dark is default on :root; both themes are equal citizens.
   Set data-theme="light"|"dark" on any scope. All ratios below measured against --bg/--surface/--surface-2. */
:root,[data-theme="dark"]{
  --bg:#0b0a1a;--surface:#15142a;--surface-2:#201d39;--fg:#f4f4f8;--muted:#a8a8b6; /* muted ≥ 6.9:1 */
  --border:rgba(255,255,255,0.10);--border-strong:rgba(255,255,255,0.20);
  --border-input:rgba(255,255,255,0.38); /* form-control edge, ≥ 3:1 (WCAG 1.4.11) */
  --tint:rgba(255,164,4,0.13);--overlay:rgba(4,3,12,0.70);
  --accent-fg:#ffa404;      /* accent text/links/active states — 8.2:1 on surface-2 */
  --accent-fg-hover:#ffb52e;
  --on-accent:#050028;      /* text/icons on --grad-diag & solid accent — ≥ 5.5:1 across the whole gradient */
  --success-fg:#4ade80;--warning-fg:#ffb52e;--error-fg:#ff6b85;--info-fg:#7eb1ff; /* all ≥ 5.9:1 */
  --error-solid:#d0152f;    /* destructive button fill, white text 5.5:1 */
  --focus-color:#ffa404;
  --focus-ring:2px solid #ffa404; /* @kind other */
  --input-focus-glow:0 0 0 3px rgba(255,164,4,0.30); /* @kind shadow */
  --hover-overlay:rgba(255,255,255,0.06);
}
[data-theme="light"]{
  --bg:#f7f7fa;--surface:#ffffff;--surface-2:#f0f0f6;--fg:#050028;--muted:#5c5c6b; /* was #6b6b7a (4.6:1) → 5.8:1 for Nexa Light */
  --border:rgba(5,0,40,0.08);--border-strong:rgba(5,0,40,0.18);
  --border-input:rgba(5,0,40,0.45); /* ≥ 3:1 */
  --tint:rgba(255,164,4,0.10);--overlay:rgba(5,0,40,0.44);
  --accent-fg:#a8380f;      /* amber #ffa404 is 1.9:1 on white — never use it as text on light */
  --accent-fg-hover:#8a2d0b;
  --on-accent:#050028;
  --success-fg:#166534;--warning-fg:#8a4b00;--error-fg:#c8102e;--info-fg:#1d4ed8; /* all ≥ 5.1:1 */
  --error-solid:#c8102e;
  --focus-color:#a8380f;
  --focus-ring:2px solid #a8380f; /* @kind other */
  --input-focus-glow:0 0 0 3px rgba(168,56,15,0.22); /* @kind shadow */
  --hover-overlay:rgba(5,0,40,0.04);
}
/* ByteGleam typography tokens — Nexa Light 300 + Bold 700 only, no in-between weights */
:root{
  --font:"Nexa","Inter","Helvetica Neue",Arial,sans-serif; /* @kind font */
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace; /* @kind font */
  --fw-light:300; /* @kind font */
  --fw-bold:700; /* @kind font */
  /* headings (desktop; H1 clamps on mobile) */
  --fs-h1:3.75rem; /* @kind font */
  --fs-h1-clamp:clamp(2.75rem,4vw + 1rem,3.75rem); /* @kind other */
  --fs-h2:2rem; /* @kind font */
  --fs-h3:1.5rem; /* @kind font */
  --fs-h4:1.25rem; /* @kind font */
  --fs-h5:1.0625rem; /* @kind font */
  --fs-h6:0.875rem; /* @kind font */
  /* body */
  --fs-lead:1.25rem; /* @kind font */
  --fs-body-lg:1.125rem; /* @kind font */
  --fs-body:1.0625rem; /* @kind font */
  --fs-body-sm:0.9375rem; /* @kind font */
  --fs-caption:0.8125rem; /* @kind font */
  --fs-footnote:0.75rem; /* @kind font */
  --fs-button:1rem; /* @kind font */
  /* labels */
  --fs-eyebrow:0.75rem; /* @kind font */
  --ls-eyebrow:0.08em; /* @kind font */
  --fs-label:0.875rem; /* @kind font */
  /* line heights */
  --lh-tight:1.1; /* @kind font */
  --lh-snug:1.25; /* @kind font */
  --lh-normal:1.6; /* @kind font */
  --prose:65ch; /* @kind spacing */
}
/* ByteGleam primitives — radius, spacing, shadow/glow, motion, z-index, container */
:root{
  --r-sm:0.375rem;--r-md:0.75rem;--r-lg:1.25rem;--r-xl:1.75rem;--r-full:9999px;
  --sp-1:0.25rem;--sp-2:0.5rem;--sp-3:0.75rem;--sp-4:1rem;--sp-6:1.5rem;--sp-8:2rem;
  --sp-12:3rem;--sp-16:4rem;--sp-24:6rem;--sp-32:8rem;
  --sh-sm:0 1px 2px 0 rgba(5,0,40,0.06);
  --sh-md:0 4px 12px -2px rgba(5,0,40,0.12);
  --sh-lg:0 12px 32px -6px rgba(5,0,40,0.24);
  --glow-amber:0 0 40px rgba(255,164,4,0.25); /* @kind shadow */
  --glow-magenta:0 0 32px rgba(255,42,72,0.30); /* @kind shadow */
  --glow-subtle:0 0 24px rgba(255,164,4,0.10); /* @kind shadow */
  --dur-instant:100ms; /* @kind other */
  --dur-fast:180ms; /* @kind other */
  --dur-base:260ms; /* @kind other */
  --dur-slow:420ms; /* @kind other */
  --dur-hero:900ms; /* @kind other */
  --ease-standard:cubic-bezier(0.2,0.6,0.2,1); /* @kind other */
  --ease-entrance:cubic-bezier(0.16,1,0.3,1); /* @kind other */
  --ease-exit:cubic-bezier(0.4,0,1,1); /* @kind other */
  --ease-snap:cubic-bezier(0.85,0,0.15,1); /* @kind other */
  --z-header:40; /* @kind other */
  --z-a11y:50; /* @kind other */
  --z-cookie:60; /* @kind other */
  --z-toast:70; /* @kind other */
  --z-tooltip:80; /* @kind other */
  --z-popover:85; /* @kind other */
  --z-modal-overlay:90; /* @kind other */
  --z-modal:100; /* @kind other */
  --container-max:1280px; /* @kind spacing */
  --container-pad-x:1.25rem; /* @kind spacing */
  /* --focus-ring / --input-focus-glow are theme-dependent → tokens/colors.css */
}
@keyframes bg-spin{to{transform:rotate(360deg)}}
@keyframes bg-shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
@keyframes bg-toast{from{transform:translateY(8px);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes bg-indet{0%{left:-40%}100%{left:100%}}
@keyframes bg-pulse{0%,100%{opacity:1}50%{opacity:.5}}
/* ByteGleam base element styles */
body{font-family:var(--font);font-weight:var(--fw-light);font-size:var(--fs-body);line-height:var(--lh-normal);background:var(--bg);color:var(--fg);margin:0;}
h1,h2,h3,h4,h5,h6,b,strong,button,label,th{font-weight:var(--fw-bold);}
h1{font-size:var(--fs-h1-clamp);line-height:var(--lh-tight);}
h2{font-size:var(--fs-h2);line-height:1.15;}
h3{font-size:var(--fs-h3);line-height:1.2;}
h4{font-size:var(--fs-h4);line-height:1.25;}
a{color:var(--accent-fg);text-decoration:underline;text-underline-offset:4px;text-decoration-color:transparent;transition:color var(--dur-fast) var(--ease-standard),text-decoration-color var(--dur-fast) var(--ease-standard),text-underline-offset var(--dur-fast) var(--ease-standard);}
a:hover{color:var(--accent-fg-hover);text-decoration-color:currentColor;text-underline-offset:2px;}
input::placeholder,textarea::placeholder{color:var(--muted);opacity:1;}
input,textarea,button,select{font-family:var(--font);}
::selection{background:rgba(255,164,4,0.35);color:inherit;}
/* Keyboard focus — visible in both themes; components never set outline themselves (inputs use --input-focus-glow). */
:where(a,button,summary,select,[role="button"],[role="tab"],[role="checkbox"],[role="radio"],[role="switch"],[tabindex]:not([tabindex="-1"])):focus-visible{outline:var(--focus-ring);outline-offset:2px;}
:where(input[type="checkbox"],input[type="radio"],input[type="range"]):focus-visible{outline:var(--focus-ring);outline-offset:2px;}
:where(button,[role="button"])[disabled],:where(button,[role="button"])[aria-disabled="true"]{cursor:not-allowed;}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important;}}
@media print{:root{color-scheme:light;}}