/* ============================================================================
   STIG ROCK - VARIANTE 4 "SIGNATURE"
   ----------------------------------------------------------------------------
   Bewusste Abweichung vom BRAND-GUIDE: mehr Farbe, aber in der warmen Familie
   der Marke. Kupfer→Gold als Verlauf, Smaragd/Rubin/Bernstein als Statusfarben.
   Weiche Kanten (6 px) und dezente Schatten statt der harten Guide-Optik.

   Basiert auf der Struktur von stigrock.html - wird NACH stigrock-app.css
   geladen und ueberschreibt nur Farben, Rundung, Schatten.
   ========================================================================== */

/* --- 1) Farbtokens: hier drehen ----------------------------------------- */
:root {
  /* Akzent als Verlauf statt Fläche */
  --copper: #c98f4e; /* Kupfer, kräftiger als im Guide */
  --copper-deep: #a06a34;
  --gold: #e8bd76;

  --primary: var(--copper);
  --primary-hover: var(--copper-deep);
  --primary-contrast: #ffffff;

  /* Statusfarben: satt, aber warm abgestimmt */
  --success: #1f9d6b;
  --danger: #d94f42;
  --warning: #eda13c;
  --info: #3f8fa8;

  --gradient-accent: linear-gradient(135deg, var(--copper) 0%, var(--gold) 100%);

  /* Rundung und Schatten wieder aktivieren */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 10px;
  --radius-2xl: 12px;

  --shadow-theme-xs: 0 1px 2px rgb(28 20 12 / 0.06);
  --shadow-theme-sm: 0 2px 6px rgb(28 20 12 / 0.08);
  --shadow-theme-lg: 0 16px 40px rgb(28 20 12 / 0.16);

  /* Modul-Farben (Kennzahlen · Pools · Pakete)
     Gold traegt auf Weiss zu wenig Kontrast - im Lightmode daher Bronze. */
  --tint-m1: var(--copper);
  --tint-m2: var(--info);
  --tint-m3: #b07d2c;
  --tint-p1: var(--success);
  --tint-p2: var(--warning);
  --tint-p3: var(--copper);
  --tint-k1: var(--success);
  --tint-k2: var(--copper);
  --tint-k3: var(--info);
}

.dark {
  --tint-m3: var(--gold);
}

/* Akzent-Rampe neu aufziehen */
:root {
  --color-brand-50: #fbf3e9;
  --color-brand-100: #f3e2c9;
  --color-brand-200: #e6c9a1;
  --color-brand-300: var(--gold);
  --color-brand-400: #d9a664;
  --color-brand-500: var(--copper);
  --color-brand-600: var(--copper-deep);
  --color-brand-700: #85552a;
  --color-brand-800: #6a4423;
  --color-brand-900: #4f331b;

  --color-success-50: #e6f6ef;
  --color-success-500: var(--success);
  --color-success-600: #17835a;
  --color-error-50: #fbeceb;
  --color-error-500: var(--danger);
  --color-error-600: #b83e33;
  --color-warning-50: #fdf3e6;
  --color-warning-500: var(--warning);
}

/* Waermere Flaechen als im Guide */
:root {
  --color-gray-50: #f8f5f0;
  --color-gray-100: #f0eae1;
  --color-gray-200: #e3dad0;
}
.dark {
  --color-gray-800: #2a241e;
  --color-gray-900: #0d0b09; /* warmes Schwarz statt Carbon */
  --color-gray-950: #070605;
  --color-gray-dark: #17130f;
}

/* --- 2) Flaechen ---------------------------------------------------------- */
.sr-panel {
  background: #ffffff;
  box-shadow: var(--shadow-theme-sm);
}
.dark .sr-panel {
  background: #15110d;
  box-shadow: none;
}

/* --- 3) Buttons als Verlauf ---------------------------------------------- */
.btn-solid,
.dark .btn-solid {
  background: var(--gradient-accent);
  border-color: transparent;
  color: #ffffff;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--copper) 30%, transparent);
}
.btn-outline {
  border-color: color-mix(in srgb, var(--copper) 45%, transparent);
  color: var(--copper-deep);
}
.dark .btn-outline {
  color: var(--gold);
  border-color: color-mix(in srgb, var(--gold) 35%, transparent);
}

/* Touch devices (iOS Safari especially) can leave :hover "stuck" after a tap -
   scoping to devices that actually support hover keeps buttons unchanged on touch. */
@media (hover: hover) {
  .btn-solid:hover,
  .dark .btn-solid:hover {
    background: var(--gradient-accent);
    filter: brightness(1.07);
    transform: translateY(-1px);
    color: #ffffff;
  }
  .btn-outline:hover {
    background: color-mix(in srgb, var(--copper) 10%, transparent);
    border-color: var(--copper);
  }
}

.sr-mark {
  background: var(--gradient-accent);
  color: #ffffff;
}

/* --- 4) Aktiver Menuepunkt und Segmente ---------------------------------- */
.sr-nav-active {
  background: color-mix(in srgb, var(--copper) 12%, transparent);
  border-left-color: var(--copper);
  color: var(--copper-deep);
}
.dark .sr-nav-active {
  color: var(--gold);
  background: color-mix(in srgb, var(--copper) 16%, transparent);
}
.seg-btn-active,
.dark .seg-btn-active {
  background: var(--gradient-accent);
  border-color: transparent;
  color: #ffffff;
}

/* --- 5) Chart: Verlauf statt flacher Flaeche ----------------------------- */
.chart-area {
  fill: url(#fillGrad);
}
.chart-line {
  stroke: var(--copper);
  stroke-width: 2.5;
  stroke-linecap: round;
}
.chart-dot {
  fill: var(--gold);
}

/* --- 6) Fortschrittsbalken: farbig statt monochrom ----------------------- */
.bg-brand-500 {
  background-image: var(--gradient-accent);
}
.bg-warning-500 {
  background-image: linear-gradient(90deg, var(--warning), var(--gold));
}
.bg-success-500 {
  background-image: linear-gradient(90deg, var(--success), #4fc79a);
}

/* --- 7) Modul-Farben: jede Kachel bekommt ihren Ton -----------------------
   --tint traegt Flaechen und Verlaeufe, --tint-ink traegt Schrift und Icons.
   Kupfer und Gold schaffen auf Weiss sonst kein WCAG AA.                    */
.tint .eyebrow,
.tint svg,
.tint .text-brand-500 {
  color: var(--tint-ink, var(--tint));
}
.tint .bg-brand-500 {
  background-image: linear-gradient(90deg, var(--tint), color-mix(in srgb, var(--tint) 45%, var(--gold)));
}
.tint .sr-mark {
  background: linear-gradient(135deg, var(--tint), color-mix(in srgb, var(--tint) 40%, var(--gold)));
}

:root {
  --copper-ink: #8f5f28;
  --info-ink: #2c6c82;
  --success-ink: #157a54;
}

.m1, .p3, .k2 { --tint: var(--copper);  --tint-ink: var(--copper-ink); }
.m2, .k3      { --tint: var(--info);    --tint-ink: var(--info-ink); }
.m3           { --tint: var(--gold);    --tint-ink: #b07d2c; }
.p1, .k1      { --tint: var(--success); --tint-ink: var(--success-ink); }
.p2           { --tint: var(--warning); --tint-ink: #a3691a; }

/* Im Darkmode duerfen die vollen Toene leuchten */
.dark .m1, .dark .p3, .dark .k2 { --tint-ink: var(--copper); }
.dark .m2, .dark .k3            { --tint-ink: var(--info); }
.dark .m3                       { --tint-ink: var(--gold); }
.dark .p1, .dark .k1            { --tint-ink: var(--success); }
.dark .p2                       { --tint-ink: var(--warning); }

/* Kennzahl-Kacheln: farbige Kante oben */
.tint.m1,
.tint.m2,
.tint.m3 {
  border-top: 2px solid var(--tint);
}

/* --- 8) Royal Card mit Kupferschimmer ------------------------------------ */
.royal-card {
  background: linear-gradient(135deg, #17120d 0%, #3a2c1d 48%, #14100c 100%);
  border-color: color-mix(in srgb, var(--copper) 30%, transparent);
}

/* --- 9) Icons auf farbigen Markern bleiben weiss ------------------------- */
.tint .sr-mark svg,
.sr-mark svg {
  color: #ffffff;
}

/* --- 10) Runde Ecken auch fuer Karte und Fortschritt --------------------- */
.royal-card {
  border-radius: var(--radius-xl);
}