/* =========================================================================
   QALadder — Ascent design system  (shared across all pages)
   Loaded BEFORE each page's own stylesheet. Defines the light + dark
   token palette, base elements, nav, buttons, cards, modal, toast, the
   theme toggle, and shared motion. Legacy token names are preserved as
   aliases so existing markup / JS keeps working untouched.
   ========================================================================= */

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

/* ----------------------------------------------------------------------- */
/* TOKENS — LIGHT (default)                                                 */
/* ----------------------------------------------------------------------- */
:root{
  color-scheme: light;

  /* surfaces & text */
  --bg:#F6F7FB;
  --bg-tint:#EEF0F8;
  --surface:#FFFFFF;
  --surface-2:#F3F5FA;
  --surface-3:#E9ECF5;
  --text:#131826;
  --text-soft:#5A6474;
  --text-faint:#8A93A3;
  --border:#E5E8F0;
  --border-strong:#D3D8E4;

  /* brand accent — indigo → cyan */
  --accent:#6C5CE7;
  --accent-2:#22C3C0;
  --accent-deep:#5241C9;
  --accent-soft:#ECEAFD;
  --accent-contrast:#FFFFFF;
  --grad-brand:linear-gradient(135deg,#6C5CE7 0%,#7B6BF0 45%,#22C3C0 100%);
  --grad-brand-soft:linear-gradient(135deg,#EEECFE 0%,#E4F6F5 100%);

  /* career levels */
  --jr:#3B82F6;   --jr-bg:#E7F0FE;
  --mid:#0EA5A0;  --mid-bg:#DCF5F3;
  --sr:#E08A0B;   --sr-bg:#FBEFD8;
  --lead:#8B5CF6; --lead-bg:#EFE8FD;

  /* semantic */
  --pass:#15A05A;  --pass-bg:#E1F5EA;
  --warn:#C77B0B;  --warn-bg:#FBF0DA;
  --fail:#DC3B3B;  --fail-bg:#FBE7E7;
  --danger:#DC3B3B;
  --idle:#9AA2B1;  --idle-bg:#EBEEF4;

  /* always-dark surfaces (code / terminal) — constant across themes */
  --ink-dark:#0C1220;
  --code-bg:#0E1422;
  --code-2:#141C2E;
  --code-text:#CFE0F5;
  --code-line:rgba(255,255,255,.09);

  /* chrome */
  --nav-bg:rgba(255,255,255,.72);
  --nav-border:rgba(19,24,38,.08);
  --nav-text:#3A4250;
  --nav-text-strong:#131826;

  /* elevation */
  --shadow-sm:0 1px 2px rgba(19,24,38,.06), 0 1px 3px rgba(19,24,38,.05);
  --shadow:0 6px 20px rgba(19,24,38,.08);
  --shadow-lg:0 20px 50px rgba(19,24,38,.16);
  --shadow-accent:0 10px 30px rgba(108,92,231,.28);

  /* radii & motion */
  --r-sm:8px; --r:12px; --r-lg:16px; --r-xl:22px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --t-fast:.16s; --t:.28s; --t-slow:.5s;

  /* fonts */
  --font-display:'Sora',sans-serif;
  --font-body:'Inter',sans-serif;
  --font-mono:'JetBrains Mono',monospace;

  /* ---- legacy aliases (do not remove — referenced by old CSS/JS/HTML) ---- */
  --night:var(--ink-dark);
  --night-2:var(--code-2);
  --paper:var(--bg);
  --panel:var(--surface);
  --ink:var(--text);
  --ink-soft:var(--text-soft);
  --line:var(--border);
  --line-dark:var(--code-line);
  --signal:var(--accent);
  --signal-deep:var(--accent-deep);
  --signal-bg:var(--accent-soft);
  --prompt-bg:var(--code-bg);
  --prompt-ink:var(--code-text);
}

/* ----------------------------------------------------------------------- */
/* TOKENS — DARK                                                           */
/* ----------------------------------------------------------------------- */
:root[data-theme="dark"]{
  color-scheme: dark;

  --bg:#0A0E16;
  --bg-tint:#0F1520;
  --surface:#141A25;
  --surface-2:#1B2230;
  --surface-3:#232C3C;
  --text:#E7EBF3;
  --text-soft:#9AA5B6;
  --text-faint:#6C7688;
  --border:#26303F;
  --border-strong:#33404F;

  --accent:#8B7CF8;
  --accent-2:#2DD4CF;
  --accent-deep:#B9AFFB;
  --accent-soft:rgba(139,124,248,.16);
  --accent-contrast:#0A0E16;
  --grad-brand:linear-gradient(135deg,#8B7CF8 0%,#7B6BF0 45%,#2DD4CF 100%);
  --grad-brand-soft:linear-gradient(135deg,rgba(139,124,248,.16) 0%,rgba(45,212,207,.14) 100%);

  --jr:#60A5FA;   --jr-bg:rgba(59,130,246,.16);
  --mid:#2DD4BF;  --mid-bg:rgba(14,165,160,.16);
  --sr:#FBBF57;   --sr-bg:rgba(224,138,11,.18);
  --lead:#A78BFA; --lead-bg:rgba(139,92,246,.18);

  --pass:#34D399;  --pass-bg:rgba(21,160,90,.18);
  --warn:#FBBF57;  --warn-bg:rgba(199,123,11,.18);
  --fail:#F87171;  --fail-bg:rgba(220,59,59,.18);
  --danger:#F87171;
  --idle:#6C7688;  --idle-bg:#1B2230;

  --nav-bg:rgba(12,16,24,.68);
  --nav-border:rgba(255,255,255,.07);
  --nav-text:#9AA5B6;
  --nav-text-strong:#E7EBF3;

  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow:0 8px 24px rgba(0,0,0,.45);
  --shadow-lg:0 24px 60px rgba(0,0,0,.55);
  --shadow-accent:0 10px 30px rgba(139,124,248,.35);
}

/* ----------------------------------------------------------------------- */
/* BASE                                                                    */
/* ----------------------------------------------------------------------- */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  transition:background var(--t) var(--ease), color var(--t) var(--ease);
}
/* soft ambient glow behind the page */
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(60vw 40vh at 82% -8%, rgba(108,92,231,.12), transparent 60%),
    radial-gradient(50vw 40vh at 8% 4%, rgba(34,195,192,.10), transparent 55%);
}
a{color:var(--accent-deep);}
::selection{background:var(--accent-soft);color:var(--accent-deep);}

/* focus visibility */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px;}

h1,h2,h3{font-family:var(--font-display);}

/* ----------------------------------------------------------------------- */
/* NAV  (shared)                                                           */
/* ----------------------------------------------------------------------- */
nav{
  position:sticky;top:0;z-index:50;
  background:var(--nav-bg);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--nav-border);
}
.nav-in{max-width:1160px;margin:0 auto;display:flex;align-items:center;gap:16px;padding:14px 24px;}
.logo{
  font-family:var(--font-display);font-weight:800;font-size:21px;
  color:var(--nav-text-strong);letter-spacing:-.02em;cursor:pointer;text-decoration:none;
  display:inline-flex;align-items:center;
}
.logo span{
  background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
.nav-links{margin-left:auto;display:flex;gap:4px;align-items:center;flex-wrap:wrap;}
.nav-btn{
  font-family:var(--font-mono);font-size:13px;letter-spacing:.01em;
  border:none;background:none;color:var(--nav-text);
  padding:9px 14px;border-radius:9px;cursor:pointer;text-decoration:none;
  transition:color var(--t-fast) var(--ease),background var(--t-fast) var(--ease);
}
.nav-btn:hover{color:var(--nav-text-strong);background:var(--surface-2);}
.nav-btn.active{background:var(--accent-soft);color:var(--accent-deep);}
.nav-btn.auth{
  border:1px solid var(--accent);color:var(--accent-deep);font-weight:700;
  background:transparent;margin-left:4px;
}
.nav-btn.auth:hover{background:var(--accent);color:var(--accent-contrast);}
.nav-user{font-family:var(--font-mono);font-size:11px;color:var(--accent-deep);padding:7px 4px;}

/* ===== profile avatar + dropdown =================================== */
.profile{position:relative;display:inline-flex;align-items:center;margin-left:4px;}
.avatar-btn,.av{width:38px;height:38px;flex:0 0 auto;border-radius:50%;border:none;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;font-size:19px;line-height:1;
  background:var(--grad-brand);color:#fff;padding:0;}
.avatar-btn{box-shadow:var(--shadow-sm);transition:transform var(--t-fast) var(--ease),box-shadow var(--t-fast);}
.avatar-btn:hover{transform:scale(1.06);box-shadow:var(--shadow);}
.profile-menu{position:absolute;top:calc(100% + 12px);right:0;width:308px;z-index:70;display:none;
  background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow-lg);padding:15px;}
.profile-menu.open{display:block;}
.pm-head{display:flex;gap:12px;align-items:center;padding-bottom:13px;border-bottom:1px solid var(--border);}
.pm-avatar{width:46px;height:46px;font-size:23px;}
.pm-id{min-width:0;}
.pm-name{font-family:var(--font-display);font-weight:700;font-size:15px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pm-email{font-size:12px;color:var(--text-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pm-section{padding:13px 0;border-bottom:1px solid var(--border);}
.pm-lbl{font-family:var(--font-mono);font-size:9.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--text-faint);margin-bottom:10px;}
.pm-prog{margin-bottom:11px;}.pm-prog:last-child{margin-bottom:0;}
.pm-prog-top{display:flex;justify-content:space-between;font-size:12.5px;font-weight:600;color:var(--text);margin-bottom:5px;}
.pm-prog-top span:last-child{font-family:var(--font-mono);color:var(--accent-deep);}
.pm-bar{height:7px;background:var(--surface-3);border-radius:999px;overflow:hidden;}
.pm-bar>div{height:100%;background:var(--grad-brand);border-radius:999px;transition:width .5s var(--ease);}
.pm-sub{font-size:11px;color:var(--text-soft);margin-top:4px;}
.avatar-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;}
.av-opt{width:100%;aspect-ratio:1;border-radius:50%;border:2px solid transparent;font-size:19px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:transform var(--t-fast) var(--ease);}
.av-opt:hover{transform:scale(1.1);}
.av-opt.sel{border-color:var(--surface);box-shadow:0 0 0 2px var(--accent);}
.pm-actions{display:flex;flex-direction:column;gap:8px;padding-top:13px;}
.pm-btn{font-family:var(--font-body);font-size:13px;font-weight:600;padding:9px 12px;border-radius:9px;
  border:1px solid var(--border);background:var(--surface-2);color:var(--text);cursor:pointer;text-align:center;transition:all var(--t-fast);}
.pm-btn.logout:hover{border-color:var(--fail);color:var(--fail);}
.pm-btn.edit:hover{border-color:var(--accent);color:var(--accent-deep);}

/* hamburger + mobile nav — shared across every page (theme.css is loaded by all) */
.hamburger{display:none;margin-left:auto;background:none;border:none;cursor:pointer;padding:8px;flex-direction:column;gap:5px;}
.hamburger span{display:block;width:20px;height:2px;background:var(--nav-text-strong);border-radius:2px;transition:transform var(--t) var(--ease),opacity var(--t-fast);}
.hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.hamburger.open span:nth-child(2){opacity:0;}
.hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
@media(max-width:960px){
  .hamburger{display:flex;}
  .nav-in{padding:13px 16px;gap:8px;position:relative;flex-wrap:nowrap;}
  .nav-links{display:none;position:absolute;top:100%;left:0;right:0;margin-left:0;
    background:var(--surface);border-bottom:1px solid var(--border);
    flex-direction:column;align-items:stretch;gap:0;padding:8px 10px 12px;box-shadow:var(--shadow-lg);}
  .nav-links.open{display:flex;}
  .nav-links .nav-btn{width:100%;text-align:left;padding:13px 12px;font-size:13.5px;border-radius:8px;border-bottom:1px solid var(--border);}
  .nav-btn.auth{margin-top:8px;text-align:center;}
  /* profile shows inline (static) inside the mobile menu */
  .profile{width:100%;flex-direction:column;align-items:stretch;margin-left:0;padding-top:8px;}
  .avatar-btn{align-self:center;margin-bottom:8px;}
  .profile-menu{position:static;display:block;width:auto;border:none;box-shadow:none;padding:0 2px;}
}

/* theme toggle */
.theme-toggle{
  width:36px;height:36px;flex:0 0 36px;border-radius:50%;
  border:1px solid var(--border);background:var(--surface-2);color:var(--text-soft);
  cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
  transition:transform var(--t) var(--ease),background var(--t-fast),border-color var(--t-fast),color var(--t-fast);
  position:relative;overflow:hidden;
}
.theme-toggle:hover{color:var(--accent-deep);border-color:var(--accent);transform:rotate(18deg);}
.theme-toggle svg{width:17px;height:17px;transition:opacity var(--t) var(--ease),transform var(--t) var(--ease);}
.theme-toggle .i-sun{display:none;}
.theme-toggle .i-moon{display:block;}
:root[data-theme="dark"] .theme-toggle .i-sun{display:block;}
:root[data-theme="dark"] .theme-toggle .i-moon{display:none;}

/* ----------------------------------------------------------------------- */
/* LAYOUT + SHARED PRIMITIVES                                              */
/* ----------------------------------------------------------------------- */
.wrap{max-width:1040px;margin:0 auto;padding:0 20px 90px;}

.eyebrow{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent-deep);background:var(--accent-soft);
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 11px;border-radius:999px;margin-bottom:14px;
  border:1px solid color-mix(in srgb,var(--accent) 22%,transparent);
}

.card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:22px;margin-bottom:16px;box-shadow:var(--shadow-sm);
  transition:background var(--t) var(--ease),border-color var(--t-fast),box-shadow var(--t) var(--ease);
}

/* buttons (shared) */
.btn{
  font-family:var(--font-mono);font-size:12.5px;font-weight:700;letter-spacing:.01em;
  border-radius:10px;padding:12px 20px;cursor:pointer;
  border:1px solid var(--border-strong);background:var(--surface);color:var(--text);
  transition:transform var(--t-fast) var(--ease),box-shadow var(--t) var(--ease),
             border-color var(--t-fast),background var(--t-fast),color var(--t-fast);
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
}
.btn:hover{border-color:var(--idle);transform:translateY(-1px);}
.btn:active{transform:translateY(0);}
.btn.primary{
  background:var(--grad-brand);color:#fff;border-color:transparent;
  box-shadow:var(--shadow-accent);
}
.btn.primary:hover{filter:brightness(1.06);box-shadow:var(--shadow-accent),0 0 0 3px var(--accent-soft);}
.btn.ghost{background:transparent;color:var(--text);border-color:var(--border-strong);}
.btn.ghost:hover{border-color:var(--accent);color:var(--accent-deep);}
.btn.dark{background:var(--ink-dark);border-color:var(--ink-dark);color:#fff;}
.btn.dark:hover{filter:brightness(1.15);}

/* toast */
.toast{
  position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(10px);
  background:var(--ink-dark);color:#fff;font-family:var(--font-mono);font-size:12px;
  padding:12px 18px;border-radius:12px;opacity:0;transition:opacity var(--t),transform var(--t) var(--ease);
  pointer-events:none;z-index:200;box-shadow:var(--shadow-lg);
  border:1px solid var(--code-line);
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

/* footer */
footer{
  border-top:1px solid var(--border);padding:26px 16px;text-align:center;
  font-size:12px;color:var(--text-faint);font-family:var(--font-mono);
}

/* ----------------------------------------------------------------------- */
/* SHARED MOTION                                                           */
/* ----------------------------------------------------------------------- */
@keyframes fadeUp{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:translateY(0);}}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}
@keyframes pop{0%{transform:scale(.96);opacity:0;}100%{transform:scale(1);opacity:1;}}
@keyframes shimmer{100%{background-position:200% 0;}}
.reveal{animation:fadeUp .5s var(--ease) both;}

/* respect reduced motion */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important;}
  body::before{display:none;}
}