/* Aether Campus — Design Tokens (www.aethercampus.com) */
/* Fonts loaded via <link> in each HTML page for reliable file:// support */

:root {
  --font-display: 'DM Serif Display', Georgia, 'Times New Roman', serif;
  --font-sans: 'DM Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;

  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-surface-secondary: var(--surface2);
  --color-border: var(--border);
  --color-text: var(--text);
  --color-text-muted: var(--text2);
  --color-primary: var(--accent);
  --color-primary-hover: var(--accent2);
  --color-success: var(--success);
  --color-warning: var(--warning);
  --color-danger: var(--danger);
  --color-ai: var(--purple);

  /* Dark defaults (app) */
  --bg: #09090E;
  --bg2: #0E1018;
  --bg3: #13151F;
  --bg4: #181B27;
  --surface: #1C1F2E;
  --surface2: #222638;
  --surface3: #282D40;
  --border: #252A3D;
  --border2: #2F3550;
  --border3: #3A4260;
  --text: #EEF0F8;
  --text2: #8B93B0;
  --text3: #525A78;
  --text4: #343B56;
  --accent: #4F8EF7;
  --accent2: #3A78E8;
  --accent3: #2A62D4;
  --ag: rgba(79, 142, 247, 0.13);
  --ag2: rgba(79, 142, 247, 0.07);
  --purple: #7B5EF8;
  --pg: rgba(123, 94, 248, 0.13);
  --teal: #2DD4BF;
  --success: #34C47C;
  --warning: #F5A623;
  --danger: #E05252;
  --navy: #0C1B3A;

  --r: 12px;
  --r2: 8px;
  --r3: 16px;
  --r4: 24px;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.45);
  --bg-glass: rgba(28, 31, 46, 0.88);
  --border-glass: rgba(58, 66, 96, 0.75);
  --blur-glass: 14px;

  --sidebar-w: 260px;
  --topbar-h: 64px;
}

body.light,
.theme-light {
  --bg: #F2F4FA;
  --bg2: #E8EBF4;
  --bg3: #DDE1EF;
  --bg4: #D2D7E8;
  --surface: #FFFFFF;
  --surface2: #F7F8FD;
  --surface3: #EEF0F8;
  --border: #DDE1EF;
  --border2: #C8CEDF;
  --border3: #B0B8D0;
  --text: #0C0E18;
  --text2: #3D4560;
  --text3: #7A82A0;
  --text4: #A8B0C8;
  --accent: #2B6EE8;
  --accent2: #1A5AD4;
  --accent3: #0F4AB8;
  --ag: rgba(43, 110, 232, 0.09);
  --ag2: rgba(43, 110, 232, 0.04);
  --purple: #6248E8;
  --pg: rgba(98, 72, 232, 0.09);
  --teal: #0D9488;
  --success: #1A9E5C;
  --warning: #C47800;
  --danger: #C03030;
  --navy: #0C1B3A;
  --shadow-sm: 0 1px 2px rgba(12, 14, 24, 0.05);
  --shadow-md: 0 6px 20px rgba(12, 14, 24, 0.08);
  --shadow-lg: 0 20px 48px rgba(12, 14, 24, 0.12);
  --bg-glass: rgba(255, 255, 255, 0.92);
  --border-glass: rgba(221, 225, 239, 0.95);
}

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

html { font-size: 15px; scroll-behavior: smooth; }

body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  transition: background 0.25s ease, color 0.25s ease;
  overflow-x: hidden;
  min-height: 100vh;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.25;
  color: var(--text);
}

a { color: var(--accent); text-decoration: none; transition: color 0.2s; }
a:hover { color: var(--accent2); }
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; }
ul { list-style: none; }
[x-cloak] { display: none !important; }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  /* transform: none (not translateY(0)) — translateY(0) still creates a containing
     block and traps position:fixed toasts inside .animate-in content. */
  to { opacity: 1; transform: none; }
}
.animate-in { animation: fadeUp 0.45s cubic-bezier(0.16, 1, 0.3, 1) both; }
.delay-1 { animation-delay: 0.06s; }
.delay-2 { animation-delay: 0.12s; }
.delay-3 { animation-delay: 0.18s; }
.delay-4 { animation-delay: 0.24s; }

.demo-fab-link {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  color: var(--text) !important;
}
.demo-fab-link:hover { background: var(--accent); color: #fff !important; }