/* ═══════════════════════════════════════
   BASE.CSS — Design System & Variables
   ═══════════════════════════════════════ */

/* Google Fonts loaded in HTML */

:root {
  /* ── COLOURS ── */
  --bg:        #080810;
  --bg2:       #0F0F1A;
  --bg3:       #161624;
  --bg4:       #1C1C2E;
  --bg5:       #222236;

  --border:    rgba(255,255,255,0.06);
  --border2:   rgba(255,255,255,0.11);
  --border3:   rgba(255,255,255,0.18);

  /* Accent palette — vibrant */
  --violet:    #7C6FFF;
  --violet2:   #A99BFF;
  --violet-dim:rgba(124,111,255,0.15);

  --emerald:   #00D68F;
  --emerald2:  #4DFFC4;
  --emerald-dim:rgba(0,214,143,0.12);

  --amber:     #FFB830;
  --amber2:    #FFD580;
  --amber-dim: rgba(255,184,48,0.12);

  --sky:       #38C4F5;
  --sky2:      #80DCFF;
  --sky-dim:   rgba(56,196,245,0.12);

  --rose:      #FF6B8A;
  --rose2:     #FFABBE;
  --rose-dim:  rgba(255,107,138,0.12);

  --coral:     #FF7B54;
  --coral-dim: rgba(255,123,84,0.12);

  /* Status */
  --success:   #00D68F;
  --success-dim:rgba(0,214,143,0.1);
  --danger:    #FF5C7A;
  --danger-dim:rgba(255,92,122,0.1);
  --warning:   #FFB830;

  /* Text */
  --text:      #EEEEF8;
  --text2:     #8A8AAA;
  --text3:     #44445E;
  --text4:     #2A2A40;

  /* ── TYPOGRAPHY ── */
  --font-display: 'Nunito', sans-serif;   /* playful, rounded */
  --font-body:    'Nunito', sans-serif;
  --font-mono:    'Fira Code', monospace; /* clean mono for German words */

  /* ── SPACING ── */
  --r-xs:  6px;
  --r-sm:  10px;
  --r:     16px;
  --r-lg:  22px;
  --r-xl:  28px;
  --r-full:9999px;

  /* ── SHADOWS ── */
  --shadow-sm:  0 2px 8px rgba(0,0,0,0.3);
  --shadow:     0 8px 24px rgba(0,0,0,0.4);
  --shadow-lg:  0 20px 60px rgba(0,0,0,0.6);
  --glow-violet:0 0 24px rgba(124,111,255,0.35);
  --glow-emerald:0 0 24px rgba(0,214,143,0.3);

  /* ── TRANSITIONS ── */
  --ease:     cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 150ms;
  --dur:      250ms;
  --dur-slow: 400ms;

  /* ── LAYOUT ── */
  --bottom-nav-h: 68px;
  --topbar-h:     56px;
  --max-w:        480px;
}

/* ── RESET ── */
*, *::before, *::after {
  margin: 0; padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html { height: 100%; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  min-height: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Ambient background glow */
body::before {
  content: '';
  position: fixed; inset: 0;
  background:
    radial-gradient(ellipse 800px 600px at 15% -5%,
      rgba(124,111,255,0.07) 0%, transparent 55%),
    radial-gradient(ellipse 600px 500px at 85% 95%,
      rgba(0,214,143,0.05) 0%, transparent 55%),
    radial-gradient(ellipse 400px 300px at 50% 50%,
      rgba(56,196,245,0.02) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
}

a { text-decoration: none; color: inherit; }
button { cursor: pointer; }
img { max-width: 100%; display: block; height: auto; }
input, button, select, textarea { font-family: inherit; }

/* ── SCROLLBAR ── */
::-webkit-scrollbar { width: 3px; height: 3px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--bg5); border-radius: 2px; }

/* ── UTILITY ── */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); border: 0;
}
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── ANIMATIONS ── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-6px); }
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.5; }
}
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%       { transform: translateX(-8px); }
  40%       { transform: translateX(8px); }
  60%       { transform: translateX(-5px); }
  80%       { transform: translateX(5px); }
}
@keyframes bounceIn {
  0%   { transform: scale(0.7); opacity: 0; }
  60%  { transform: scale(1.08); opacity: 1; }
  80%  { transform: scale(0.95); }
  100% { transform: scale(1); }
}
@keyframes streakPop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.18); }
  70%  { transform: scale(0.93); }
  100% { transform: scale(1); }
}

.anim-fadeUp   { animation: fadeUp  var(--dur-slow) var(--ease-out) both; }
.anim-fadeIn   { animation: fadeIn  var(--dur)      var(--ease-out) both; }
.anim-scaleIn  { animation: scaleIn var(--dur)      var(--ease-spring) both; }
.anim-bounceIn { animation: bounceIn 0.5s var(--ease-spring) both; }

/* Stagger delays */
.delay-1 { animation-delay: 50ms;  }
.delay-2 { animation-delay: 100ms; }
.delay-3 { animation-delay: 150ms; }
.delay-4 { animation-delay: 200ms; }
.delay-5 { animation-delay: 250ms; }