@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800;900&family=Source+Serif+4:wght@600;700&display=swap');

:root{
  --bg:#0f172a;
  --bg2:#0b1220;
  --top:#1e293b;
  --card:#0b1220;
  --surface:#0f172a;
  --border:#334155;
  --border2:#475569;
  --text:#e2e8f0;
  --text2:#cbd5e1;
  --muted:#94a3b8;
  --title:#f8fafc;
  --primary:#3b82f6;
  --primary2:#2563eb;
  --danger:#dc2626;
  --danger2:#b91c1c;
  --success:#16a34a;
  --success2:#15803d;

  --radius-sm:10px;
  --radius-md:12px;
  --radius-lg:16px;

  --shadow-md:0 18px 38px rgba(0,0,0,.35);
  --shadow-sm:0 10px 24px rgba(0,0,0,.25);

  --pad-1:10px;
  --pad-2:12px;
  --pad-3:14px;

  --font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
  --font-serif:'Source Serif 4',Georgia,'Times New Roman',serif;
}

body{background:var(--bg);color:var(--text);font-family:var(--font-sans)}

body{
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

a{color:#93c5fd;text-decoration:none}
a:hover{text-decoration:underline}

.top{background:var(--top);border-bottom:1px solid var(--border)}
.top h1{color:var(--title);font-family:var(--font-serif)}
.top h1 span{color:var(--primary)}

h1,h2,h3,.t{font-family:var(--font-serif)}

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

.btn{background:var(--primary);color:#fff;border-radius:var(--radius-md);letter-spacing:.2px}
.btn:hover{background:var(--primary2)}
.btn.ghost{background:transparent;border:1px solid var(--border2);color:var(--text2)}
.btn.ghost:hover{border-color:var(--muted)}
.btn.danger{background:var(--danger)}
.btn.danger:hover{background:var(--danger2)}

input,select,textarea{background:var(--surface);border:1px solid var(--border);color:var(--text);border-radius:var(--radius-md)}
input:focus,select:focus,textarea:focus{border-color:var(--primary);box-shadow:0 0 0 2px rgba(59,130,246,.18)}

.pill,.tag{border-radius:999px}

.box{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);color:var(--text)}

.note{color:var(--muted)}