/* ═══════════════════════════════════════
   YUNITY · base.css  v4
═══════════════════════════════════════ */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  /* Kernpalette */
  --ink:   #0d0c0a;
  --stone: #191714;
  --clay:  #252220;
  --fog:   #46423d;
  --ash:   #87817a;
  --sand:  #c2bab1;
  --linen: #e6e0d8;
  --warm:  #f4f0ea;

  /* Akzente */
  --amber:       #c8a96e;
  --amber-mid:   #b8954e;
  --amber-dim:   rgba(200,169,110,0.05);
  --amber-glow:  rgba(200,169,110,0.16);
  --amber-line:  rgba(200,169,110,0.22);
  --sage:        #7a9e8e;
  --sage-dim:    rgba(122,158,142,0.08);
  --danger:      #c47a6e;

  /* Typografie */
  --font-serif: 'Outfit', sans-serif;
  --font-sans:  'Outfit', sans-serif;

  /* System */
  --scale: 3;
  --radius: 3px;

  /* Timing */
  --t-fast: 0.1s ease;
  --t-mid:  0.2s ease;
  --t-slow: 0.36s ease;
  --t-xslow: 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

html, body { height: 100%; }

body {
  background: var(--ink);
  font-family: 'Outfit', sans-serif;
  font-weight: 300;
  color: var(--sand);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Grain overlay — subtiler als vorher */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.028'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 9999;
  mix-blend-mode: overlay;
}

a { text-decoration: none; color: inherit; }

button {
  font-family: 'Outfit', sans-serif;
  cursor: pointer;
  border: none;
  background: none;
}

canvas { display: block; }

/* ── ANIMATIONEN ── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes ambientPulse {
  0%, 100% { opacity: 0.3; }
  50%       { opacity: 0.55; }
}

.fade-up   { animation: fadeUp var(--t-xslow) both; }
.fade-up-1 { animation: fadeUp var(--t-xslow) 0.05s both; }
.fade-up-2 { animation: fadeUp var(--t-xslow) 0.1s both; }
.fade-up-3 { animation: fadeUp var(--t-xslow) 0.15s both; }
.fade-up-4 { animation: fadeUp var(--t-xslow) 0.2s both; }
.fade-up-5 { animation: fadeUp var(--t-xslow) 0.25s both; }

.scale-in  { animation: scaleIn var(--t-xslow) both; }

/* ═══════════════════════════════════════
   YUNITY · CHART SURFACES
═══════════════════════════════════════ */

.chart-card{
  background:var(--stone);
  border:1px solid var(--clay);
  border-radius:var(--radius);
}

.chart-title{
  font-size:9px;
  letter-spacing:0.15em;
  text-transform:uppercase;
  color:var(--ash);
  margin-bottom:12px;
}


/* Heatmap */

.hm-bg{
  background:var(--stone);
}

.hm-cell-bg{

  background:var(--stone);

  border:1px solid var(--clay);

  border-radius:var(--radius);

}


/* Radar */

.radar-grid{
  stroke:var(--clay);
}

.radar-ist{
  stroke:var(--amber);
  fill:rgba(200,169,110,0.12);
}

.radar-soll{
  stroke:var(--sage);
}
/* ═══════════════════════════════════════
   YUNITY · 4-THEME SYSTEM
   Dark Warm · Dark Cold · Light Warm · Light Cold
═══════════════════════════════════════ */

/* ── DEFAULT: Dark Warm (Warm Rose) ── */
[data-theme="dark-warm"] {
  --bg:         #0c0a0a;
  --bg-mid:     #0f0d0d;
  --bg-high:    #141110;
  --border:     #211e1e;
  --border-hi:  #2c2828;

  --text-hi:    #f5eeea;
  --text-mid:   #c4b8b2;
  --text-lo:    #7a706c;
  --text-faint: #46423d;

  --accent:     #c49080;
  --accent-dim: rgba(196,144,128,0.06);
  --accent-line:rgba(196,144,128,0.22);
  --accent-glow:rgba(196,144,128,0.16);
  --accent2:    #7a9e8e;

  /* legacy aliases — keep existing code working */
  --ink:    #0c0a0a;
  --stone:  #0f0d0d;
  --clay:   #211e1e;
  --fog:    #46423d;
  --ash:    #7a706c;
  --sand:   #c4b8b2;
  --linen:  #f5eeea;
  --warm:   #f5eeea;
  --amber:        #c49080;
  --amber-mid:    #b07060;
  --amber-dim:    rgba(196,144,128,0.05);
  --amber-glow:   rgba(196,144,128,0.16);
  --amber-line:   rgba(196,144,128,0.22);
  --sage:         #7a9e8e;
  --sage-dim:     rgba(122,158,142,0.08);

  color-scheme: dark;
}

/* ── Light Warm (Leinen Amber) ── */
[data-theme="light-warm"] {
  /* Backgrounds — warmes Leinen mit klaren Stufen */
  --bg:         #f5f0e8;
  --bg-mid:     #ece5d8;
  --bg-high:    #e2d9c8;
  --border:     #d8cfc0;
  --border-hi:  #c4b8a4;

  /* Text — starker Kontrast auf hellem Grund */
  --text-hi:    #18140e;
  --text-mid:   #4a3e34;
  --text-lo:    #8a7d72;
  --text-faint: #b4a99e;

  /* Akzente — Amber satter, Sage als Kontrast */
  --accent:     #9a7040;
  --accent-dim: rgba(154,112,64,0.07);
  --accent-line:rgba(154,112,64,0.28);
  --accent-glow:rgba(154,112,64,0.16);
  --accent2:    #6a9e88;

  /* Legacy aliases */
  --ink:    #f5f0e8;
  --stone:  #ece5d8;
  --clay:   #d8cfc0;
  --fog:    #b4a99e;
  --ash:    #8a7d72;
  --sand:   #4a3e34;
  --linen:  #18140e;
  --warm:   #18140e;
  --amber:        #9a7040;
  --amber-mid:    #886030;
  --amber-dim:    rgba(154,112,64,0.06);
  --amber-glow:   rgba(154,112,64,0.16);
  --amber-line:   rgba(154,112,64,0.28);
  --sage:         #6a9e88;
  --sage-dim:     rgba(106,158,136,0.10);

  color-scheme: light;
}