/* ======================================================
   CSS CUSTOM PROPERTIES
   Nur Variablen-Definitionen. Alle geteilten Stile in shared.css.
   ====================================================== */

:root {
  --multiplier: 1rem;

  /* ======================================================================
     THEME — Nur --theme-hue ändern um das gesamte UI umzufärben
     Beispiele: 257 = Lila (Standard), 200 = Blau, 130 = Grün, 0 = Rot
  ====================================================================== */
  --theme-hue: 257;
  --theme-sat: 100%;
  --theme-lit: 50%;

  /* Abgeleitet — nicht direkt ändern */
  --cl-theme:        hsl(var(--theme-hue), var(--theme-sat), var(--theme-lit));
  --cl-theme-dark:   hsl(var(--theme-hue), var(--theme-sat), 40%);
  --cl-theme-bg:     hsl(calc(var(--theme-hue) - 40), 100%, 95%);
  --cl-theme-accent: hsl(var(--theme-hue), 12%, 47%);

  /* ======== COLOR PALETTE ======== */
  --cl-black:         hsl(0, 0%, 0%);
  --cl-black-light:   hsl(240, 10%, 10%);
  --cl-grey-dark:     hsl(0, 0%, 13%);
  --cl-grey-medium:   hsl(0, 0%, 40%);
  --cl-grey:          hsl(0, 0%, 70%);
  --cl-grey-light:    hsl(0, 0%, 88%);
  --cl-grey-lighter:  hsl(0, 0%, 94%);
  --cl-grey-lightest: hsl(210, 17%, 98%);
  --cl-white:         hsl(0, 0%, 100%);
  --cl-white-10:      hsla(0, 0%, 100%, 0.1);
  --cl-white-50:      hsla(0, 0%, 100%, 0.5);
  --overlay-10:       hsla(0, 0%, 0%, 0.1);
  --overlay-25:       hsla(0, 0%, 0%, 0.25);
  --overlay-50:       hsla(0, 0%, 0%, 0.5);
  --overlay-75:       hsla(0, 0%, 0%, 0.75);

  --cl-negative:    hsl(343, 100%, 50%);
  --cl-negative-bg: hsla(343, 100%, 50%, 0.1);
  --cl-warning:     hsl(30, 100%, 50%);
  --cl-warning-bg:  hsla(30, 100%, 50%, 0.1);

  /* ======== RARITY COLORS ======== */
  --cl-rarity-5:    hsl(40, 100%, 50%);
  --cl-rarity-5-bg: hsla(40, 100%, 50%, 0.1);
  --cl-rarity-4:    hsl(264, 100%, 50%);
  --cl-rarity-4-bg: hsla(264, 100%, 50%, 0.1);
  --cl-rarity-3:    hsl(200, 80%, 50%);
  --cl-rarity-3-bg: hsla(200, 80%, 50%, 0.1);

  /* ======== GRADIENTS ======== */
  --cl-card-purple-start: hsl(252, 14%, 15%);
  --cl-card-purple-end:   hsl(272, 26%, 37%);
  --cl-card-gold-start:   hsl(20, 12%, 15%);
  --cl-card-gold-end:     hsl(30, 51%, 30%);
  --gradient-purple: linear-gradient(180deg, var(--cl-card-purple-start) 0%, var(--cl-card-purple-end) 100%);
  --gradient-gold:   linear-gradient(180deg, var(--cl-card-gold-start) 0%, var(--cl-card-gold-end) 100%);

  /* ======== BUTTON COLORS ======== */
  --cl-btn-primary:         var(--cl-theme);
  --cl-btn-primary-hover:   var(--cl-theme-dark);
  --cl-btn-secondary:       var(--cl-grey-dark);
  --cl-btn-secondary-hover: var(--cl-black);

  /* ======== TYPOGRAPHY ======== */
  --ff: "Lato", Avenir, Montserrat, sans-serif;
  --fs-8:  calc(var(--fs-16) / 2);
  --fs-10: calc(var(--fs-16) * 0.625);
  --fs-12: calc(var(--fs-16) * 0.75);
  --fs-16: var(--multiplier);
  --fs-20: calc(var(--fs-16) * 1.25);
  --fs-24: calc(var(--fs-16) * 1.5);
  --fs-48: calc(var(--fs-16) * 3);
  --letter-space: 1px;

  /* ======== SPACING SYSTEM ======== */
  --sz-25:  calc(var(--sz-100) / 4);
  --sz-50:  calc(var(--sz-100) / 2);
  --sz-75:  calc(var(--sz-100) * 0.75);
  --sz-100: var(--multiplier);
  --sz-125: calc(var(--sz-100) * 1.25);
  --sz-150: calc(var(--sz-100) * 1.5);
  --sz-200: calc(var(--sz-100) * 2);
  --sz-300: calc(var(--sz-100) * 3);
  --sz-400: calc(var(--sz-100) * 4);
  --sz-500: calc(var(--sz-100) * 5);

  /* ======== BORDER RADIUS SYSTEM ======== */
  --radius-sm:   var(--sz-25);  /* Tags, Badges */
  --radius-md:   var(--sz-50);  /* Inputs, kleine Chips */
  --radius-lg:   var(--sz-100); /* Buttons, Cards */
  --radius-xl:   var(--sz-200); /* Panels, Tabellen, Modals */
  --radius-full: 9999px;        /* Vollrund: Chips, Avatare */

  /* ======== COMPONENT SIZING ======== */
  --section-padding: 15rem 10vw;
  --logo-size: 5rem;
  --card-size: 9rem;
  --card-ratio: calc(152 / 488);
  --card-margin: 2.5rem;
  --card-gap: 8rem 3rem;
  --btn-height: var(--sz-200);
  --mselect-count: 4;
  --mselect-size: 33px;
  --mselect-container-padding: var(--sz-75);
  --mselect-margin: var(--sz-25);

  /* ======== VISUAL EFFECTS ======== */
  --shadow-modal:    0 20px 60px hsla(0, 0%, 0%, 0.3);
  --shadow-card:     0 4px 12px hsla(0, 0%, 0%, 0.1);
  --shadow-elevated: 0 8px 24px hsla(0, 0%, 0%, 0.15);
  --blur-sm: 0.5rem;
  --blur-md: 1rem;
  --opacity-0:   0;
  --opacity-10:  0.1;
  --opacity-25:  0.25;
  --opacity-50:  0.5;
  --opacity-75:  0.75;
  --opacity-100: 1;

  /* ======== ANIMATIONS ======== */
  --transition:      300ms;
  --transition-fast: 150ms;
  --transition-base: 300ms;
  --transition-slow: 500ms;
  --ease-out:    cubic-bezier(0.0, 0.0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0.0, 0.2, 1);

  /* ======== Z-INDEX LAYERS ======== */
  --z-below:    -1;
  --z-base:      0;
  --z-elevated:  3;
  --z-nav:      90;
  --z-modal:  1000;
}

/* ======== RESPONSIVE — Variablen-Anpassungen ======== */
@media (max-width: 480px) {
  :root {
    --multiplier: 0.875rem;
    --section-padding: 8rem 5vw 5rem;
    --card-size: 6rem;
    --card-gap: 5rem 1.5rem;
    --sz-400: 2rem;
    --sz-500: 3rem;
  }
}
@media (min-width: 481px) and (max-width: 768px) {
  :root {
    --multiplier: 0.9375rem;
    --section-padding: 10rem 7vw 8rem;
    --card-size: 7rem;
    --card-gap: 6rem 2rem;
  }
}
@media (min-width: 769px) and (max-width: 1024px) {
  :root { --card-size: 8rem; --card-gap: 7rem 2.5rem; }
}
@media (min-width: 1025px) {
  :root { --card-size: 9rem; --card-gap: 8rem 3rem; }
}