/* =============================================================
   AcademIA — Shared Design Tokens
   All pages import this file. Page-specific overrides go in
   each page's own <style> block after this stylesheet.
   ============================================================= */

:root {
  /* Backgrounds */
  --bg:          #f5f7fb;
  --bg-grad-1:   #f8fbff;
  --bg-grad-2:   #f2f5fb;
  --bg-radial-1: rgba(15, 118, 110, 0.16);
  --bg-radial-2: rgba(180,  83,   9, 0.16);

  /* Surfaces */
  --panel:      #ffffff;
  --panel-soft: #f8fafc;
  --surface:    var(--panel);       /* alias — used by cloud-hustle & longevity */
  --surface-2:  var(--panel-soft);  /* alias — used by cloud-hustle */

  /* Typography */
  --ink:   #172033;
  --muted: #5b6478;

  /* Borders */
  --line: #d6ddec;

  /* Brand */
  --brand:      #0f766e;
  --brand-soft: #ccfbf1;
  --primary:    var(--brand);   /* alias — used by cloud-hustle */
  --primary-2:  #14b8a6;

  /* Accent */
  --accent:      #b45309;
  --accent-soft: #ffedd5;

  /* Feedback */
  --success: #166534;
  --danger:  #b91c1c;

  /* Elevation */
  --shadow: 0 14px 34px rgba(15, 23, 42, 0.10);
}

[data-theme="dark"] {
  --bg:          #0b1220;
  --bg-grad-1:   #08101c;
  --bg-grad-2:   #0e1628;
  --bg-radial-1: rgba(34, 197,  94, 0.18);
  --bg-radial-2: rgba(245, 158,  11, 0.16);

  --panel:      #111a2b;
  --panel-soft: #17233a;

  --ink:   #e5eefc;
  --muted: #a6b4ce;

  --line: #2a3a55;

  --brand:      #16a34a;
  --brand-soft: #133423;
  --primary-2:  #10b981;

  --accent:      #f59e0b;
  --accent-soft: #422006;

  --success: #4ade80;
  --danger:  #f87171;

  --shadow: 0 16px 36px rgba(0, 0, 0, 0.35);
}

/* =============================================================
   Logo light/dark swap — shared across all pages
   ============================================================= */
.site-logo {
  height: 36px;
  width: auto;
  display: block;
}

.logo-dark {
  display: none;
}

[data-theme="dark"] .logo-light {
  display: none;
}

[data-theme="dark"] .logo-dark {
  display: block;
}