@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-serif: Georgia, serif;
  --r-sm:  8px;
  --r-md:  16px;
  --r-lg:  24px;
  --r-xl:  36px;
  --ease:  cubic-bezier(.4,0,.2,1);
  --t:     250ms;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s8: 48px;
  --shadow-1: 0 4px 24px rgba(0,0,0,.03), 0 2px 8px rgba(0,0,0,.02);
  --shadow-2: 0 12px 48px rgba(0,0,0,.06), 0 4px 16px rgba(0,0,0,.04);
  --shadow-3: 0 24px 80px rgba(0,0,0,.1);
}


[data-mode="dark"] {
  --bg:          #08090a;
  --bg-up:       #111214;
  --bg-panel:    #15171a;
  --bg-input:    #0e1012;
  --border:      #212429;
  --border-soft: #191b1f;
  --text:        #f0f2f5;
  --text-2:      #a1a6b0;
  --text-3:      #5b606b;
  --danger:      #ff5a5a;
  --warn:        #ffb74d;
  --success:     #3dd68c;
}


[data-mode="light"] {
  --bg:          #fafbfc;
  --bg-up:       #ffffff;
  --bg-panel:    #ffffff;
  --bg-input:    #f1f3f7;
  --border:      #e4e7ec;
  --border-soft: #edf0f5;
  --text:        #1d2128;
  --text-2:      #5c6370;
  --text-3:      #8f96a3;
  --danger:      #e53935;
  --warn:        #f57c00;
  --success:     #22c55e;
}


[data-palette="green"] {
  --ac:     #2dd4bf; 
  --ac-str: #14b8a6;
  --ac-dim: rgba(45,212,191,.15);
  --ac-ink: #042f2e;
}

[data-palette="black"] {
  --ac:     #94a3b8;
  --ac-str: #cbd5e1;
  --ac-dim: rgba(148,163,184,.15);
  --ac-ink: #0f172a;
}

[data-palette="white"] {
  --ac:     #f8fafc;
  --ac-str: #ffffff;
  --ac-dim: rgba(255,255,255,.15);
  --ac-ink: #0f172a;
}


*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { min-height: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background var(--t) var(--ease), color var(--t) var(--ease);
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
h1,h2,h3,h4,h5,h6 { margin: 0; font-weight: 600; letter-spacing: -0.02em; }