/* ============================================================
   TITO.TRADE – CSS VARIABLES (Design-System)
   Alle Designwerte zentral. Hier ändern = überall ändern.
   ============================================================ */
:root {
    /* Farben – Dark Premium Tech */
    --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-strong:   #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);

    /* Typografie */
    --font-display: "Inter", "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

    --fs-hero:        clamp(4.5rem, 16vw, 12rem);
    --fs-h1:          clamp(2.2rem, 6vw, 4.5rem);
    --fs-h2:          clamp(1.4rem, 3vw, 2rem);
    --fs-body:        1.0625rem;
    --fs-small:       0.875rem;
    --fs-tiny:        0.75rem;

    --tracking-tight: -0.045em;
    --tracking-wide:  0.18em;

    /* Projektion/Kanten */
    --radius-small:  8px;
    --radius-medium: 14px;
    --radius-large:  22px;
    --radius-pill:   999px;

    /* Abstände */
    --spacing-section: clamp(6rem, 12vw, 10rem);
    --spacing-gap:     clamp(1rem, 2.5vw, 1.5rem);
    --container:       1200px;
    --container-pad:   clamp(1.25rem, 5vw, 2.5rem);

    /* Schatten & Glows */
    --shadow-small:   0 2px 8px rgba(0, 0, 0, 0.35);
    --shadow-large:   0 24px 70px -20px rgba(0, 0, 0, 0.6);
    --glow-accent:    0 0 40px -8px rgba(251, 255, 255, 0.28);
    --glow-card:      0 0 0 1px rgba(255, 255, 255, 0.04) inset;

    /* Motion Defaults (auch per JS über MOTION_CONFIG steuerbar) */
    --ease-out:        cubic-bezier(0.22, 1, 0.36, 1);
    --ease-smooth:     cubic-bezier(0.45, 0, 0.15, 1);
}