/* Gleiche Design-Tokens wie tito.trade (bewusst dieselben Werte, eigene
   Kopie -- kein Cross-Origin-Import in den privaten Bereich). */
:root {
    --color-background:      #000000;
    --color-surface:         rgba(255, 255, 255, 0.03);
    --color-surface-hover:   rgba(255, 255, 255, 0.06);
    --color-surface-solid:   #0a0a0b;
    --color-text:            #eceef1;
    --color-text-muted:      #8b909b;
    --color-text-faint:      #565b66;
    --color-accent:          #fbffff;
    --color-accent-soft:     rgba(251, 255, 255, 0.12);
    --color-border:          rgba(255, 255, 255, 0.08);
    --color-border-strong:   rgba(255, 255, 255, 0.14);

    --color-ok:      #3ddc84;
    --color-warn:    #f5c451;
    --color-error:   #ff5f6d;
    --color-unknown: #8b909b;

    --font-display: "Inter", "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --fs-h1: clamp(1.6rem, 3vw, 2.2rem);
    --fs-h2: clamp(1.1rem, 2vw, 1.4rem);
    --fs-body: 0.95rem;
    --fs-small: 0.8125rem;
    --fs-tiny: 0.7rem;
    --tracking-wide: 0.14em;

    --radius-small: 8px;
    --radius-medium: 14px;
    --radius-large: 20px;

    --shadow-large: 0 24px 70px -20px rgba(0, 0, 0, 0.6);
    --glow-accent: 0 0 40px -8px rgba(251, 255, 255, 0.22);
    --glow-card: 0 0 0 1px rgba(255, 255, 255, 0.04) inset;

    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

    --sidebar-width: 240px;
}