/* =====================================================
   Fertig — Lavender-Rose Theme
   JetBrains Mono · Pink-purple gradient · Dark mode ready
   ===================================================== */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400;1,700&display=swap');

:root{
  /* Palette — derived from the lavender-rose gradient */
  --primary:#a070a0;          /* Muted purple */
  --primary-light:#fb8282;    /* Rose */
  --accent:#be95be;           /* Lavender */
  --accent-light:#d4b8d4;     /* Soft lilac */
  --muted:#b09ab0;            /* Dusty mauve */
  --success:#5cb85c;
  --info:#e8a0c8;
  --danger:#d9534f;

  /* Surfaces */
  --bg:#f3e9f2;               /* Warm lavender base */
  --surface:#f9f1f8;          /* Tinted panel background */
  --surface-2:#f1e3f1;        /* Deeper lavender layer */
  --text:#211021;             /* Higher-contrast deep plum */
  --text-muted:#5e425f;
  --border:#cfaed0;
  --focus-ring:rgba(160,112,160,.32);
  --hover-tint:rgba(190,149,190,.16);
  --code-bg:#efe2ee;
  --code-text:#2b1730;
  --code-border:#c7aac9;
  --page-glow-a:rgba(190,149,190,.3);
  --page-glow-b:rgba(232,160,200,.2);

  /* Effects */
  --radius:10px;
  --shadow-sm:0 3px 14px rgba(160,112,160,.16);
  --shadow-md:0 10px 30px rgba(160,112,160,.2);
  --maxw:1200px;

  /* Gradients — the hero gradient */
  --brand-grad:linear-gradient(to right, #be95be 0%, #fb8282 100%);
  --accent-grad:linear-gradient(135deg, #be95be, #fb8282);

  /* Transition for dark-mode color change */
  color-scheme: light dark;
}

/* ===== DARK MODE ===== */
[data-theme="dark"]{
  --bg:#1a0f1a;
  --surface:#211621;
  --surface-2:#2a1b2a;
  --text:#f0d8ef;
  --text-muted:#a87fa8;
  --border:#3f2a3f;
  --shadow-sm:0 2px 12px rgba(0,0,0,.25);
  --shadow-md:0 8px 28px rgba(0,0,0,.35);
  --primary:#cf8ecf;
  --primary-light:#fb9e9e;
  --accent:#be95be;
  --accent-light:#d69cd6;
  --info:#e8a0c8;
  --success:#7cc97c;
  --danger:#e06b67;
  --focus-ring:rgba(207,142,207,.36);
  --hover-tint:rgba(190,149,190,.24);
  --code-bg:#2a1b2a;
  --code-text:#f0d8ef;
  --code-border:#4b314b;
  --page-glow-a:rgba(190,149,190,.1);
  --page-glow-b:rgba(251,130,130,.05);
  --brand-grad:linear-gradient(to right, #8a608a 0%, #c05050 100%);
  --accent-grad:linear-gradient(135deg, #8a608a, #c05050);
}

/* ===== Shared Keyframes ===== */
@keyframes neo-drift{
  0%,100%{transform:translate(0,0) rotate(0deg)}
  25%{transform:translate(40px,-25px) rotate(8deg)}
  50%{transform:translate(-15px,-45px) rotate(-6deg)}
  75%{transform:translate(-35px,15px) rotate(4deg)}
}
@keyframes neo-float{
  0%,100%{transform:translateY(0) rotate(0deg)}
  50%{transform:translateY(-20px) rotate(3deg)}
}
@keyframes neo-spin{
  from{transform:rotate(0deg)}to{transform:rotate(360deg)}
}
@keyframes neo-fadeUp{
  from{opacity:0;transform:translateY(24px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes neo-scaleIn{
  from{opacity:0;transform:scale(.9)}
  to{opacity:1;transform:scale(1)}
}

/* ===== Base ===== */
*{box-sizing:border-box}
html{scroll-behavior:smooth;scrollbar-gutter:stable}
body{
  font-family:'JetBrains Mono',monospace;
  -webkit-font-smoothing:antialiased;
  transition:background .3s ease,color .3s ease;
}
.muted{color:var(--text-muted)}
.center{text-align:center}
.badge{padding:3px 10px;border-radius:6px;font-size:11px;font-weight:700;letter-spacing:.4px;text-transform:uppercase}
.container{max-width:var(--maxw);margin:0 auto;padding:0 30px}
.link-btn{
  font-weight:700;text-decoration:none;color:var(--primary);
  padding:8px 14px;border-radius:8px;
  background:rgba(190,149,190,.08);border:1px solid rgba(190,149,190,.15);
  font-size:13px;transition:all .2s ease;
}
.link-btn:hover{background:rgba(190,149,190,.14);border-color:rgba(190,149,190,.25)}

/* ===== Dark-Mode Toggle Button ===== */
.theme-toggle{
  appearance:none;border:none;cursor:pointer;
  width:38px;height:38px;border-radius:8px;
  display:grid;place-items:center;
  background:rgba(255,255,255,.12);color:#fff;
  font-size:18px;line-height:1;
  transition:all .2s ease;
  flex-shrink:0;
}
.theme-toggle:hover{background:rgba(255,255,255,.2)}
[data-theme="dark"] .theme-toggle{background:rgba(255,255,255,.08);color:var(--accent)}

/* ===== Floating Geometric Shapes (reusable) ===== */
.geo-canvas{
  position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;
}
.geo{position:absolute;opacity:.045}
.geo--circle{
  width:280px;height:280px;border-radius:50%;
  border:3px solid var(--primary);
  top:15%;right:-60px;
  animation:neo-drift 20s ease-in-out infinite;
}
.geo--diamond{
  width:120px;height:120px;border:3px solid var(--accent);
  transform:rotate(45deg);
  bottom:20%;left:4%;
  animation:neo-drift 16s ease-in-out infinite 3s;
}
.geo--triangle{
  width:0;height:0;
  border-left:70px solid transparent;
  border-right:70px solid transparent;
  border-bottom:120px solid var(--success);
  opacity:.035;
  top:45%;left:35%;
  animation:neo-drift 22s ease-in-out infinite 5s;
}
.geo--ring{
  width:160px;height:160px;border-radius:50%;
  border:2px solid var(--info);
  top:65%;right:15%;
  animation:neo-float 12s ease-in-out infinite 2s;
}
.geo--cross{
  width:60px;height:60px;position:absolute;
  top:8%;left:20%;opacity:.04;
  animation:neo-spin 30s linear infinite;
}
.geo--cross::before,.geo--cross::after{
  content:"";position:absolute;background:var(--accent);border-radius:2px;
}
.geo--cross::before{width:100%;height:4px;top:50%;transform:translateY(-50%)}
.geo--cross::after{height:100%;width:4px;left:50%;transform:translateX(-50%)}
.geo--dots{
  width:100px;height:100px;
  background:radial-gradient(circle,var(--primary) 1.5px,transparent 1.5px);
  background-size:16px 16px;
  opacity:.04;bottom:8%;right:30%;
  animation:neo-float 14s ease-in-out infinite 4s;
}
.hidden{display:none}