/* ==========================================================================
   CASANOVA CITY – DESIGN TOKENS v1
   Einzige Quelle fuer Farben, Schrift, Abstaende, Radien, Schatten, Bewegung.
   Original: powerrp-webshop/src/styles/casanova-tokens.css
   Kopie Website: POWER REGEL/assets/css/casanova-tokens.css  (node scripts/sync-design-tokens.mjs)
   Nicht in der Kopie aendern – immer hier, dann synchronisieren.

   Marke: CASANOVA = Rot, CITY = Weiss, Grund = tiefes Neutral-Schwarz.
   Rot #ff1e31 ist das Logo-/Ingame-Rot (cc_hexui, Clips).
   ========================================================================== */

:root {
  /* ---------- Farbe: Marke ---------- */
  --cc-red-rgb: 255, 30, 49;
  --cc-red-300: #ff7a86;
  --cc-red-400: #ff4d5e;   /* Hover/hell, Text-Akzent auf sehr dunklem Grund */
  --cc-red-500: #ff1e31;   /* Markenrot: Akzente, Glow, Hervorhebung, rote Ueberschrift */
  --cc-red-600: #e0142a;   /* Button-Flaeche: Weiss darauf erfuellt WCAG AA (>= 4.5:1) */
  --cc-red-700: #b80f22;   /* Button gedrueckt */
  --cc-red-900: #3a0409;   /* getoente Flaechen */
  --cc-red-glow: rgba(var(--cc-red-rgb), 0.35);
  --cc-red-tint: rgba(var(--cc-red-rgb), 0.10);
  --cc-red-line: rgba(var(--cc-red-rgb), 0.45);

  /* ---------- Farbe: Neutral (leicht kuehl, ohne Blaustich) ---------- */
  --cc-ink-950: #050506;   /* Seitenhintergrund */
  --cc-ink-900: #0b0b0e;   /* abgesetzte Bereiche, Header */
  --cc-ink-850: #111115;   /* Karten */
  --cc-ink-800: #17171c;   /* Karte Hover / Eingabefelder */
  --cc-ink-700: #24242b;   /* starke Linie */
  --cc-line: rgba(255, 255, 255, 0.08);
  --cc-line-strong: rgba(255, 255, 255, 0.16);

  --cc-text: #ffffff;
  --cc-text-muted: #a8a8b0;  /* 8.6:1 auf ink-950 */
  --cc-text-dim: #6f6f78;    /* 4.1:1 – nur fuer Nebensaechliches/grosse Schrift */

  /* ---------- Farbe: Status ---------- */
  --cc-success: #2ecc71;
  --cc-warning: #f5b301;
  --cc-info: #4b8bff;
  --cc-danger: var(--cc-red-500);
  --cc-discord: #5865f2;

  /* ---------- Schrift ---------- */
  --cc-font-display: "Outfit", "Geist", system-ui, sans-serif;  /* Ueberschriften, Zahlen, Preise */
  --cc-font-body: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --cc-font-mono: "Geist Mono", ui-monospace, "Cascadia Mono", monospace;

  /* Typo-Skala (fluid, 360px -> 1440px) */
  --cc-text-xs: 0.75rem;                                   /* 12 */
  --cc-text-sm: 0.875rem;                                  /* 14 */
  --cc-text-base: 1rem;                                    /* 16 */
  --cc-text-lg: 1.125rem;                                  /* 18 */
  --cc-text-xl: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);    /* 20-24 */
  --cc-text-2xl: clamp(1.5rem, 1.25rem + 1vw, 2rem);       /* 24-32 */
  --cc-text-3xl: clamp(2rem, 1.5rem + 2vw, 3rem);          /* 32-48 */
  --cc-text-4xl: clamp(2.5rem, 1.6rem + 3.6vw, 4.5rem);    /* 40-72 Hero */
  --cc-leading-tight: 1.1;
  --cc-leading-snug: 1.3;
  --cc-leading-body: 1.6;
  --cc-tracking-eyebrow: 0.16em;  /* Kicker-Zeilen in Versalien */

  /* ---------- Abstaende (4er-Raster) ---------- */
  --cc-space-1: 0.25rem;  /* 4 */
  --cc-space-2: 0.5rem;   /* 8 */
  --cc-space-3: 0.75rem;  /* 12 */
  --cc-space-4: 1rem;     /* 16 */
  --cc-space-5: 1.5rem;   /* 24 */
  --cc-space-6: 2rem;     /* 32 */
  --cc-space-7: 3rem;     /* 48 */
  --cc-space-8: 4rem;     /* 64 */
  --cc-space-9: 6rem;     /* 96 */
  --cc-section-y: clamp(3.5rem, 2rem + 6vw, 7rem);
  --cc-gutter: clamp(1rem, 0.5rem + 2.5vw, 2.5rem);
  --cc-max-width: 1320px;

  /* ---------- Radien ---------- */
  --cc-radius-sm: 8px;    /* Chips, kleine Buttons */
  --cc-radius-md: 12px;   /* Buttons, Eingaben */
  --cc-radius-lg: 16px;   /* Karten */
  --cc-radius-xl: 24px;   /* grosse Flaechen, Hero-Medien */
  --cc-radius-full: 999px;

  /* ---------- Schatten ---------- */
  --cc-shadow-card: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 20px 40px -24px rgba(0, 0, 0, 0.8);
  --cc-shadow-raised: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 30px 60px -20px rgba(0, 0, 0, 0.9);
  --cc-shadow-glow: 0 0 0 1px var(--cc-red-line), 0 10px 40px -10px var(--cc-red-glow);
  --cc-focus-ring: 0 0 0 2px var(--cc-ink-950), 0 0 0 4px var(--cc-red-500);

  /* ---------- Bewegung ---------- */
  --cc-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --cc-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --cc-dur-fast: 150ms;
  --cc-dur-base: 220ms;
  --cc-dur-slow: 400ms;

  /* ---------- Ebenen ---------- */
  --cc-z-header: 50;
  --cc-z-overlay: 80;
  --cc-z-toast: 90;

  /* Breakpoints (nur Referenz – in @media als Zahl verwenden): 480 / 768 / 1024 / 1280 */
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --cc-dur-fast: 0ms;
    --cc-dur-base: 0ms;
    --cc-dur-slow: 0ms;
  }
}