/* ============================================================
   Design-Tokens — Farbpalette, Spacing, Radius, Motion, Schatten
   Basis für das gesamte visuelle System der Billard-Rangliste.
   ============================================================ */

:root {
  /* --- Marken-Grundfarben (exakt aus der Vorgabe) --------------- */
  --fando: #4F942A;        /* Fando-Grün — Primär, Akzent, Belohnung */
  --anthracite: #333535;   /* Anthrazit — Schrift, dunkle Flächen    */
  --stone: #9E9FA0;        /* Stein-Grau — Hinweise, Trenner, inaktiv*/
  --offwhite: #F8F7FC;     /* Off-White — Flächen, Hintergrund       */

  /* --- Abgeleitete Grün-Töne (Hover/Active/Tiefe, kein Glow) ---- */
  --fando-600: #457f24;
  --fando-700: #3a6c1e;
  --fando-300: #7fb763;
  --fando-100: #e6f0df;
  --fando-tint: #f0f6ec;

  /* --- Abgeleitete Anthrazit-Töne ------------------------------ */
  --ink-900: #232525;
  --ink-800: #2b2d2d;
  --ink-700: #333535;
  --ink-600: #474a4a;
  --ink-500: #5c5f5f;

  /* --- Neutrale Graustufen (aus Stein-Grau abgeleitet) --------- */
  --stone-100: #f2f2f3;
  --stone-200: #e6e6e8;
  --stone-300: #d6d7d8;
  --stone-400: #bcbdbe;
  --stone-500: #9E9FA0;
  --stone-600: #7c7d7e;

  /* --- Semantische Zuordnung ----------------------------------- */
  --bg:            var(--offwhite);
  --bg-elevated:   #ffffff;
  --bg-sunken:     #f1f0f6;
  --surface:       #ffffff;
  --surface-2:     #fbfaff;
  --text:          var(--anthracite);
  --text-muted:    #6c6e6e;
  --text-subtle:   var(--stone-500);
  --text-invert:   var(--offwhite);
  --primary:       var(--fando);
  --primary-ink:   #ffffff;
  --border:        var(--stone-200);
  --border-strong: var(--stone-300);
  --divider:       var(--stone-200);

  /* Status (dezent, aus der Palette abgeleitet) */
  --success:       var(--fando);
  --danger:        #c2462f;
  --danger-tint:   #f7e7e3;
  --warning:       #c98a2b;
  --warning-tint:  #f6ecda;
  --gold:          #c8a24a;   /* Krone */
  --gold-soft:     #efe0bd;

  /* --- Typografie ---------------------------------------------- */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, Helvetica, Arial, sans-serif;
  --font-num: "Inter", ui-monospace, "SF Mono", sans-serif;

  --fs-2xs: 0.6875rem;  /* 11 */
  --fs-xs:  0.75rem;    /* 12 */
  --fs-sm:  0.8125rem;  /* 13 */
  --fs-md:  0.9375rem;  /* 15 */
  --fs-lg:  1.0625rem;  /* 17 */
  --fs-xl:  1.375rem;   /* 22 */
  --fs-2xl: 1.75rem;    /* 28 */
  --fs-3xl: 2.375rem;   /* 38 */
  --fs-4xl: 3.25rem;    /* 52 */

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 800;

  --lh-tight: 1.1;
  --lh-snug: 1.3;
  --lh-normal: 1.5;
  --tracking-tight: -0.02em;
  --tracking-wide: 0.04em;
  --tracking-caps: 0.08em;

  /* --- Spacing-Skala (4pt) ------------------------------------- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;

  /* --- Radius -------------------------------------------------- */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;
  --r-circle: 50%;

  /* --- Schatten (weich, neutral, KEIN Glow) -------------------- */
  --shadow-xs: 0 1px 2px rgba(35, 37, 37, 0.06);
  --shadow-sm: 0 2px 6px rgba(35, 37, 37, 0.07);
  --shadow-md: 0 6px 18px rgba(35, 37, 37, 0.09);
  --shadow-lg: 0 14px 38px rgba(35, 37, 37, 0.14);
  --shadow-xl: 0 24px 60px rgba(35, 37, 37, 0.20);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.6);

  /* --- Motion (Dauer + Easing) --------------------------------- */
  --dur-1: 120ms;   /* Mikro-Tap */
  --dur-2: 200ms;   /* kleine Übergänge */
  --dur-3: 320ms;   /* Standard */
  --dur-4: 480ms;   /* größere Bewegungen */
  --dur-5: 720ms;   /* Inszenierung */

  --ease-standard: cubic-bezier(0.32, 0.72, 0, 1);   /* premium ease-out */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);          /* expo-out */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);   /* leichter Overshoot */
  --ease-emphasis: cubic-bezier(0.22, 1, 0.36, 1);

  /* --- Layout -------------------------------------------------- */
  --app-max: 480px;             /* mobile-first, zentriert auf Desktop */
  --nav-h: 68px;
  --header-h: 56px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  --z-nav: 40;
  --z-header: 30;
  --z-overlay: 60;
  --z-modal: 70;
  --z-toast: 90;
  --z-celebrate: 100;

  color-scheme: light;
}