/* ============================================================================
   SHARPIXEL.DE — DESIGN TOKENS  (Relaunch-Fundament, Vorschlag)
   ----------------------------------------------------------------------------
   Handschrift: "technisch / Pixel-DNA" — präzises Digital-Studio, Grid,
   Mono-Akzente, ownable Typo.

   AUFBAU (3 Ebenen):
     1) PRIMITIVES   — rohe Skalen & Farbrampen (nie direkt im UI benutzen)
     2) SEMANTIC      — Bedeutungs-Tokens (--bg, --text, --accent …) je Theme
     3) UTILITIES     — abgeleitete Composites (Gradients, Fokus-Ring …)

   INTEGRATION: Der Lead mappt bestehende Werte auf die SEMANTIC-Tokens.
   Reihenfolge im Bundle:
     @import "css/vendor/inter/inter.css";
     @import "css/vendor/space-grotesk/space-grotesk.css";
     @import "css/vendor/space-mono/space-mono.css";
     @import "tokens-neu.css";   (danach styles.css, das die Tokens konsumiert)

   Alte Variablen bleiben toter Code, bis remapped — kein Hard-Cut nötig:
     --clr-bg-dark    -> var(--bg)
     --clr-bg-surface -> var(--surface)
     --clr-light      -> var(--text)
     --clr-text-muted -> var(--text-muted)   (ersetzt Apple-Grau #86868b)
     --clr-accent     -> var(--accent)
     --font-main      -> var(--font-body)
   ============================================================================ */

:root {

  /* ==========================================================================
     1) PRIMITIVES
     ========================================================================== */

  /* --- Font-Familien -------------------------------------------------------
     Display = Space Grotesk (technische Grotesk, aus einer Mono destilliert).
     Mono    = Space Mono    (Eyebrows/Labels/Code — Pixel-DNA-Akzent).
     Body    = Inter         (bereits self-hosted, neutraler Fließtext).      */
  --font-display: 'Space Grotesk', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'Space Mono', ui-monospace, 'SFMono-Regular', 'Cascadia Code', Consolas, monospace;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* --- Font-Weights (bewusst knapp gehalten) ------------------------------ */
  --fw-light:     300;
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;

  /* --- Signature-Blau "azure" (Primär) -------------------------------------
     Das etablierte Blau der Pixel-Animation, konsolidiert & leicht elektrisch.
     --azure-500 = die EINE Signature-Primärfarbe.                            */
  --azure-50:   #eaf1ff;
  --azure-100:  #d2e2ff;
  --azure-200:  #a9c6ff;
  --azure-300:  #78a4ff;
  --azure-400:  #4c8dff;
  --azure-500:  #2e74ff;   /* ← SIGNATURE PRIMARY */
  --azure-600:  #1f5eeb;
  --azure-700:  #1a4cc4;
  --azure-800:  #17409e;
  --azure-900:  #15367d;

  /* --- Cyan "cyan" (Sekundär) ----------------------------------------------
     Kühler Endpunkt des Signature-Verlaufs (Blau -> Cyan). Sparsam einsetzen. */
  --cyan-300:   #6ee7f7;
  --cyan-400:   #38d9f0;
  --cyan-500:   #17c3e6;   /* ← SECONDARY */
  --cyan-600:   #0aa6c8;
  --cyan-700:   #0b829d;

  /* --- Neutrale Rampe "ink" -------------------------------------------------
     Leicht kühle Graustufen (winziger Blau-Unterton) — NICHT Apple #86868b.
     Trägt das technische, graphit-artige Studio-Gefühl.                      */
  --ink-0:     #ffffff;
  --ink-25:    #f7f8fa;
  --ink-50:    #eef0f4;
  --ink-100:   #e1e4ea;
  --ink-200:   #c7ccd6;
  --ink-300:   #a6acbb;
  --ink-400:   #7c8395;   /* muted-Text auf hell / de-Apple-fiziert */
  --ink-500:   #5c6272;
  --ink-600:   #444a58;
  --ink-700:   #2e333e;
  --ink-800:   #1c2028;
  --ink-850:   #14171d;
  --ink-900:   #0d0f14;
  --ink-950:   #07090f;   /* near-black mit kühlem Cast (Dark-BG) */
  --ink-1000:  #000000;

  /* --- Semantische Status-Farben (dezent, technisch) ----------------------- */
  --green-500:  #2ec77d;
  --amber-500:  #f5b93b;
  --red-500:    #ff5a4d;

  /* ==========================================================================
     SPACING — 8px-Grid (mit 4er-Halbschritten).
     Für Padding, Gaps, Margins, Grid-Rinnen. Skala statt Zufallswerte.
     ========================================================================== */
  --space-0:   0;
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;
  --space-32:  128px;

  /* ==========================================================================
     RADIUS — bewusst knapp/technisch. Grosse Radien vermeiden (kein "App-Bubble").
     ========================================================================== */
  --r-xs:    4px;    /* Chips, Tags, Mono-Badges */
  --r-sm:    6px;    /* Buttons, Inputs */
  --r-md:    10px;   /* Cards, Panels */
  --r-lg:    16px;   /* grosse Container, Feature-Boxen */
  --r-pill:  999px;  /* Pills, runde Buttons, Dots */

  /* ==========================================================================
     TYPE-SCALE — modulare clamp-Skala (fluid, ~1.2 mobil -> ~1.28 desktop).
     Fluid zwischen 360px und 1280px Viewport. xs/sm = UI/Body, 2xl+ = Display.
     ========================================================================== */
  --fs-xs:    clamp(0.75rem, 0.72rem + 0.12vw, 0.8125rem);   /* 12 -> 13  Eyebrows, Labels, Captions */
  --fs-sm:    clamp(0.8125rem, 0.78rem + 0.16vw, 0.875rem);  /* 13 -> 14  Small UI, Meta */
  --fs-base:  clamp(0.9375rem, 0.9rem + 0.2vw, 1rem);        /* 15 -> 16  Fliesstext */
  --fs-lg:    clamp(1.0625rem, 1.0rem + 0.3vw, 1.1875rem);   /* 17 -> 19  Lead-Absatz */
  --fs-xl:    clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);       /* 20 -> 24  H4 / kleine Headline */
  --fs-2xl:   clamp(1.5rem, 1.3rem + 1.0vw, 2rem);           /* 24 -> 32  H3 */
  --fs-3xl:   clamp(1.875rem, 1.55rem + 1.6vw, 2.75rem);     /* 30 -> 44  H2 */
  --fs-4xl:   clamp(2.375rem, 1.9rem + 2.4vw, 3.75rem);      /* 38 -> 60  H1 Section */
  --fs-5xl:   clamp(3rem, 2.2rem + 4.0vw, 5rem);             /* 48 -> 80  Hero */
  --fs-6xl:   clamp(3.75rem, 2.5rem + 6.2vw, 6.5rem);        /* 60 -> 104 Display / XXL-Hero */

  /* --- Line-Heights --------------------------------------------------------- */
  --lh-tight:    1.05;   /* grosse Display-Headlines (Space Grotesk) */
  --lh-snug:     1.2;    /* H2/H3 */
  --lh-normal:   1.55;   /* Fliesstext */
  --lh-relaxed:  1.7;    /* lange Lesetexte */

  /* --- Letter-Spacing (Tracking) -------------------------------------------
     Display: minimal negativ (Grotesk wirkt "gebaut"). Mono-Eyebrow: weit.  */
  --tracking-tighter:  -0.02em;   /* XXL-Display */
  --tracking-tight:    -0.01em;   /* Headlines */
  --tracking-normal:   0;
  --tracking-wide:     0.02em;    /* Mono-Labels (eng, kein KI-Sperr-Look) */
  --tracking-eyebrow:  0.02em;    /* Mono-Eyebrows, Klein-/Satzschreibung */

  /* ==========================================================================
     SHADOWS — dezent, kühl getönt, technisch (kein weicher "Material"-Drop).
     Auf Dark-BG zusätzlich über Border/Glow arbeiten (siehe --glow-*).
     ========================================================================== */
  --shadow-sm:  0 1px 2px rgba(7, 9, 15, 0.28);
  --shadow-md:  0 4px 14px rgba(7, 9, 15, 0.35), 0 1px 3px rgba(7, 9, 15, 0.30);
  --shadow-lg:  0 18px 48px rgba(7, 9, 15, 0.45), 0 4px 12px rgba(7, 9, 15, 0.35);

  /* --- Signature-Glow (statt bunter Schatten) — Blau/Cyan-Aura ------------- */
  --glow-azure:  0 0 0 1px rgba(46, 116, 255, 0.35), 0 8px 30px rgba(46, 116, 255, 0.22);
  --glow-cyan:   0 0 24px rgba(23, 195, 230, 0.30);

  /* ==========================================================================
     MOTION — schnell & präzise (Studio-Feeling, keine trägen Eases).
     ========================================================================== */
  --dur-fast:  120ms;
  --dur-base:  220ms;
  --dur-slow:  420ms;
  --ease:            cubic-bezier(0.2, 0.8, 0.2, 1);   /* Standard-Ease-Out */
  --ease-in-out:     cubic-bezier(0.65, 0, 0.35, 1);
  --ease-emphasized: cubic-bezier(0.16, 1, 0.3, 1);    /* für Hero/Reveals */

  /* ==========================================================================
     LAYOUT-Tokens
     ========================================================================== */
  --container:     1200px;
  --container-tight: 880px;
  --nav-height:    70px;
  --border-width:  1px;


  /* ==========================================================================
     2) SEMANTIC — DARK THEME (Default)
     ========================================================================== */
  --bg:            var(--ink-950);                 /* Seiten-Hintergrund (near-black, kühl) */
  --bg-elevated:   #0b0e16;                         /* leicht angehoben */
  --surface:       #0d1017;                         /* Cards/Panels */
  --surface-2:     #141823;                         /* verschachtelte Fläche / Hover */
  --surface-3:     #1b2130;                         /* aktive/hervorgehobene Fläche */

  --text:          #f4f6fb;                         /* primärer Text (kühles Weiss, nicht #fff) */
  --text-muted:    #8a91a3;                         /* sekundär (ERSETZT Apple #86868b) */
  --text-subtle:   #5c6473;                         /* tertiär, Disabled, Meta */

  --border:        rgba(255, 255, 255, 0.09);       /* Standard-Trennlinien */
  --border-strong: rgba(255, 255, 255, 0.16);       /* betonte Kanten, Grid-Linien */
  --border-mono:   rgba(46, 116, 255, 0.28);        /* technischer Blau-Rahmen (Mono-Panels) */

  --accent:        var(--azure-500);                /* SIGNATURE — Links, CTAs, Fokus */
  --accent-hover:  var(--azure-400);                /* heller auf Dark = mehr Kontrast */
  --accent-quiet:  rgba(46, 116, 255, 0.14);        /* Tint-Flächen (Badge-BG, Hover) */
  --accent-2:      var(--cyan-500);                 /* Sekundär-Akzent (sparsam) */
  --on-accent:     #ffffff;                         /* Text auf Accent-Fläche */

  --grid-line:     rgba(255, 255, 255, 0.05);       /* Pixel/Grid-Raster-Overlay */
  --focus-ring:    0 0 0 3px rgba(46, 116, 255, 0.45);

  color-scheme: dark;
}

/* ==========================================================================
   2) SEMANTIC — LIGHT THEME
   Aktivierung nach Bestand: [data-theme="light"] ODER .light-mode am <html>.
   (Selektor an vorhandenes Theme-Switching des Leads anpassen.)
   ========================================================================== */
:root[data-theme="light"],
html.light-mode {
  --bg:            var(--ink-25);                   /* #f7f8fa — nicht Apple #f5f5f7 */
  --bg-elevated:   #ffffff;
  --surface:       #ffffff;
  --surface-2:     var(--ink-50);
  --surface-3:     var(--ink-100);

  --text:          #10131a;                         /* fast-schwarz, kühl */
  --text-muted:    #5c6373;                         /* ersetzt Apple #6e6e73 */
  --text-subtle:   #8a91a3;

  --border:        rgba(16, 19, 26, 0.10);
  --border-strong: rgba(16, 19, 26, 0.18);
  --border-mono:   rgba(46, 116, 255, 0.30);

  --accent:        var(--azure-600);                /* dunkler auf hell = lesbar */
  --accent-hover:  var(--azure-500);
  --accent-quiet:  rgba(46, 116, 255, 0.10);
  --accent-2:      var(--cyan-600);
  --on-accent:     #ffffff;

  --grid-line:     rgba(16, 19, 26, 0.06);
  --focus-ring:    0 0 0 3px rgba(46, 116, 255, 0.35);

  /* Schatten auf hell etwas kräftiger, damit Tiefe trägt */
  --shadow-sm:  0 1px 2px rgba(16, 19, 26, 0.08);
  --shadow-md:  0 4px 14px rgba(16, 19, 26, 0.10), 0 1px 3px rgba(16, 19, 26, 0.08);
  --shadow-lg:  0 18px 48px rgba(16, 19, 26, 0.14), 0 4px 12px rgba(16, 19, 26, 0.10);

  color-scheme: light;
}


/* ==========================================================================
   3) UTILITIES — abgeleitete Composites (nutzen die Tokens oben)
   ========================================================================== */
:root {
  /* Signature-Verlauf Blau -> Cyan (die Pixel-Animations-DNA als Fläche/Text) */
  --gradient-signature: linear-gradient(100deg, var(--azure-400) 0%, var(--azure-500) 45%, var(--cyan-500) 100%);
  --gradient-line:      linear-gradient(90deg, transparent, var(--border-strong) 50%, transparent);
}

/* Optionale, sofort nutzbare Helfer-Klassen (der Lead kann sie übernehmen) */

/* Mono-Eyebrow: der Signatur-Kicker über Headlines */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-regular);
  letter-spacing: var(--tracking-eyebrow);
  color: var(--accent);
}

/* Display-Headline: Space Grotesk, tight gesetzt */
.display {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text);
}

/* Text mit Signature-Verlauf (Hero-Wort / Zahl) */
.text-gradient {
  background: var(--gradient-signature);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}