/* ════════ Design tokens — fonts + light/dark theme variables ════════
   The mockup is fully variable-driven, so dark mode is a token swap.
   Brand accents (teal/green/blue/down + gradient) are identical in both. */

@font-face{font-family:'ProximaNova';src:url('../assets/fonts/ProximaNova-Regular.otf') format('opentype');font-weight:400;font-display:swap}
@font-face{font-family:'ProximaNova';src:url('../assets/fonts/ProximaNova-Medium.otf') format('opentype');font-weight:500;font-display:swap}
@font-face{font-family:'ProximaNova';src:url('../assets/fonts/Proxima Nova Semibold.ttf') format('truetype');font-weight:600;font-display:swap}
@font-face{font-family:'ProximaNova';src:url('../assets/fonts/FontsFree-Net-Proxima-Nova-Xbold.otf') format('opentype');font-weight:700;font-display:swap}
@font-face{font-family:'LeagueGothic';src:url('../assets/fonts/LeagueGothic-Regular.ttf') format('truetype');font-weight:400;font-display:swap}

:root{
  /* structural (theme-independent) */
  --teal:#1fc2b0;
  --teal-2:#16a89a;
  --green:#7fb942;
  --blue:#3f9fdb;
  --down:#e0685a;
  --grad:linear-gradient(110deg,#7fb942 0%,#1fc2b0 52%,#3f9fdb 100%);
  --sans:'ProximaNova',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --display:'LeagueGothic','ProximaNova',sans-serif;
  --ease:cubic-bezier(.22,.9,.28,1);
  --sh:0 12px 40px rgba(0,0,0,.45);
}

/* ── LIGHT (default) ── matches the original mockup ── */
:root,[data-theme="light"]{
  --app-bg:
    radial-gradient(150% 130% at 50% -15%, rgba(255,255,255,.13), transparent 46%),
    radial-gradient(130% 120% at 105% 118%, rgba(4,22,48,.32), transparent 58%),
    linear-gradient(138deg,#005ea0 0%,#1f83ba 24%,#3fbfbd 47%,#76c456 76%,#54a132 100%);
  --wave-op:.24;

  --surface:rgba(255,255,255,.5);
  --surface-2:rgba(255,255,255,.58);
  --surface-3:rgba(8,24,48,.07);
  --border:rgba(8,24,48,.1);
  --border-2:rgba(8,24,48,.16);

  --text-1:#103154;
  --text-2:#3f566e;
  --text-3:#647688;
  --on-grad:#06231f;

  --side-bg:rgba(255,255,255,.6);
  --side-border:rgba(255,255,255,.4);
  --glass:rgba(255,255,255,.78);
  --glass-2:rgba(255,255,255,.72);
  --glass-border:rgba(255,255,255,.65);
  --bubble:#fff;
  --bubble-border:rgba(8,24,48,.06);
  --card-bg:#fff;
  --cite-bg:rgba(255,255,255,.85);
  --on-surface-strong:#fff; /* labels over the gradient backdrop */
}

/* ── DARK ── deep desaturated gradient; brand accents unchanged ── */
[data-theme="dark"]{
  --app-bg:
    radial-gradient(150% 130% at 50% -15%, rgba(255,255,255,.05), transparent 46%),
    radial-gradient(130% 120% at 105% 118%, rgba(0,0,0,.45), transparent 58%),
    linear-gradient(138deg,#04121f 0%,#06202e 28%,#0a2a3a 52%,#0c2417 80%,#0a1e12 100%);
  --wave-op:.10;

  --surface:rgba(255,255,255,.06);
  --surface-2:rgba(255,255,255,.08);
  --surface-3:rgba(255,255,255,.08);
  --border:rgba(255,255,255,.1);
  --border-2:rgba(255,255,255,.16);

  --text-1:#e9f1f7;
  --text-2:#b4c4d2;
  --text-3:#7e93a3;
  --on-grad:#06231f;

  --side-bg:rgba(14,22,30,.72);
  --side-border:rgba(255,255,255,.08);
  --glass:rgba(20,28,36,.72);
  --glass-2:rgba(20,28,36,.62);
  --glass-border:rgba(255,255,255,.12);
  --bubble:#121a22;
  --bubble-border:rgba(255,255,255,.08);
  --card-bg:#121a22;
  --cite-bg:rgba(255,255,255,.06);
  --on-surface-strong:#eaf3f8;
}