/* 1025DEX Community v0.31.35 · css/ds-tokens.css · ausgelagert aus index.html */
/* ===========================================================================
   1025DEX · Design System v0.28 "Aurora"
   ---------------------------------------------------------------------------
   Eine einzige, durchgehende Gestaltungssprache fuer die gesamte App.
   Diese Schicht liegt bewusst hinter allen aelteren Schichten und ersetzt
   deren Oberflaechen-Entscheidungen: Farbe, Flaeche, Kante, Schatten,
   Typografie, Abstand und Bewegung. Inhalte und Logik bleiben unberuehrt.

   Aufbau
     1  Farb- und Form-Token          6  Navigationsleiste
     2  Grundlagen und Typografie     7  Uebersicht
     3  Flaechen und Panels           8  Pokedex, Finder, Binder
     4  Bedienelemente                9  Scan Lab
     5  Kopfzeile                    10  Fenster, Hinweise, Bewegung
   =========================================================================== */

/* --- 1 · Token ----------------------------------------------------------- */

html:root,
html[data-theme="light"]:root,
html[data-theme="dark"]:root{
  /* Flaechen: vier Stufen, von der Seite bis zum hervorgehobenen Element */
  --bg:#f2f2f6;
  --bg-elev:#ffffff;
  --panel:#ffffff;
  --panel-2:#f4f4f7;
  --panel-3:#ebebf0;

  /* Schrift: drei Gewichtungen, wie in einer Systemoberflaeche */
  --ink:#16161a;
  --ink-soft:#66666e;
  --ink-faint:#9a9aa3;

  /* Kanten: Haarlinien statt Rahmen */
  --line:rgba(22,22,26,.10);
  --line-soft:rgba(22,22,26,.06);
  --line-strong:rgba(22,22,26,.16);

  /* Akzente */
  --accent:#e03127;
  --accent-ink:#ffffff;
  --accent-soft:rgba(224,49,39,.10);
  --accent-deep:#b3221a;
  --red:var(--accent);
  --red-dark:var(--accent-deep);

  --owned:#1f9d52;
  --owned-soft:rgba(31,157,82,.12);
  --wish:#7c4ddb;
  --wish-soft:rgba(124,77,219,.12);
  --lens:#0a72e8;
  --lens-soft:rgba(10,114,232,.12);
  /* Eigenes Artwork - nimmt bewusst dasselbe Blau wie die Lupe, damit die
     Palette nicht um einen weiteren Ton waechst. */
  --art:var(--lens);
  --warn:#b7791f;
  --warn-soft:rgba(183,121,31,.14);
  --empty:#c9c9d0;

  /* Formen */
  --r-xs:8px; --r-sm:10px; --r-md:14px; --r-lg:18px; --r-xl:22px;
  --r-2xl:28px; --r-full:999px;
  --radius:var(--r-lg);

  /* Tiefe: mehrschichtig und leise, nie ein harter Versatz */
  --sh-1:0 1px 1px rgba(16,16,22,.04), 0 2px 6px rgba(16,16,22,.05);
  --sh-2:0 2px 4px rgba(16,16,22,.04), 0 8px 22px rgba(16,16,22,.07);
  --sh-3:0 6px 14px rgba(16,16,22,.07), 0 22px 48px rgba(16,16,22,.11);
  --sh-accent:0 6px 18px rgba(224,49,39,.26);
  --shadow:var(--sh-1);

  /* Glas */
  --glass:rgba(250,250,252,.72);
  --glass-line:rgba(22,22,26,.08);
  --blur:saturate(180%) blur(22px);

  /* Raster */
  --gap:12px;
  --pad:16px;
  --maxw:760px;

  /* Bewegung: eine Kurve fuer Eintritte, eine fuer Wechsel, eine fuer Federn */
  --ease-out:cubic-bezier(.32,.72,0,1);
  --ease-in-out:cubic-bezier(.62,.03,.28,1);
  --ease-spring:cubic-bezier(.34,1.42,.44,1);
  --ease-fluid:var(--ease-out);
  --ease-glide:var(--ease-out);
  --ease-soft:var(--ease-in-out);
  --t-fast:170ms;
  --t-base:280ms;
  --t-slow:460ms;
  --motion-fast:var(--t-fast);
  --motion-base:var(--t-base);
  --motion-slow:var(--t-slow);
  --glide:380ms;

  /* Schrift */
  --ui:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --ui-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
}

html[data-theme="dark"]:root{
  --bg:#000000;
  --bg-elev:#141418;
  --panel:#1a1a1f;
  --panel-2:#232329;
  --panel-3:#2c2c33;

  --ink:#f6f6f8;
  --ink-soft:#a0a0aa;
  --ink-faint:#6e6e78;

  --line:rgba(255,255,255,.11);
  --line-soft:rgba(255,255,255,.06);
  --line-strong:rgba(255,255,255,.18);

  --accent:#ff4a3d;
  --accent-soft:rgba(255,74,61,.16);
  --accent-deep:#d0271c;

  --owned:#34cf6a;
  --owned-soft:rgba(52,207,106,.16);
  --wish:#a683ff;
  --wish-soft:rgba(166,131,255,.16);
  --lens:#4c9dff;
  --lens-soft:rgba(76,157,255,.16);
  --art:var(--lens);
  --warn:#e3b04b;
  --warn-soft:rgba(227,176,75,.18);
  --empty:#3a3a42;

  --sh-1:0 1px 1px rgba(0,0,0,.4), 0 2px 8px rgba(0,0,0,.35);
  --sh-2:0 2px 6px rgba(0,0,0,.45), 0 10px 26px rgba(0,0,0,.45);
  --sh-3:0 8px 20px rgba(0,0,0,.5), 0 26px 56px rgba(0,0,0,.55);
  --sh-accent:0 6px 20px rgba(255,74,61,.3);

  --glass:rgba(24,24,28,.72);
  --glass-line:rgba(255,255,255,.1);
}