/* ============================================================
   Skyroot brand theme — minimal planetary background
   Navy · Orange · White, with dark (default) and light modes.
   Loaded after styles.css / club-scenes.css so it overrides them.
   ============================================================ */

:root {
  --brand: #ff7a1a;
  --brand-2: #ff9a4d;
  --brand-ink: #0b1633;
  --navy: #0b1633;

  --bg: #050b1f;
  --bg-soft: #0a1430;
  --panel: rgba(10, 20, 48, 0.72);
  --panel-2: rgba(10, 20, 48, 0.55);
  --panel-3: rgba(255, 255, 255, 0.045);
  --fill: rgba(255, 255, 255, 0.05);
  --fill-hover: rgba(255, 255, 255, 0.09);
  --border: rgba(160, 178, 220, 0.16);
  --border-strong: rgba(160, 178, 220, 0.28);
  --text: #f4f6fb;
  --muted: #9aa8c7;
  --soft: #cdd6ea;
  --teal: #ff7a1a;
  --blue: #6f8fe8;
  --violet: #ff9a4d;
  --shadow: 0 24px 70px rgba(0, 0, 0, 0.4);
  --input-bg: rgba(5, 11, 31, 0.6);
  --surface-solid: #0c1738;
  --topbar-bg: rgba(7, 15, 38, 0.74);

  --pl-stars: #ffffff;
  --pl-star-opacity: .5;
  --pl-glow: rgba(255, 122, 26, .22);
  --pl-orbit: rgba(200, 214, 245, .16);
  --pl-orbit-faint: rgba(200, 214, 245, .09);
  --pl-moon: #e8ecf6;
  --pl-moon-2: #9fb0d6;
  --pl-giant: radial-gradient(circle at 70% 30%, #26407f, #0f1d45 55%, #070f28);
  --pl-ring: rgba(255, 154, 77, .4);
  color-scheme: dark;
}

html[data-theme="light"] {
  --bg: #f5f7fb;
  --bg-soft: #ffffff;
  --panel: rgba(255, 255, 255, 0.84);
  --panel-2: rgba(255, 255, 255, 0.7);
  --panel-3: rgba(11, 22, 51, 0.03);
  --fill: rgba(11, 22, 51, 0.04);
  --fill-hover: rgba(11, 22, 51, 0.07);
  --border: rgba(11, 22, 51, 0.1);
  --border-strong: rgba(11, 22, 51, 0.18);
  --text: #0b1633;
  --muted: #56627e;
  --soft: #2e3a58;
  --blue: #2f5bd3;
  --shadow: 0 18px 50px rgba(11, 22, 51, 0.08);
  --input-bg: #ffffff;
  --surface-solid: #ffffff;
  --topbar-bg: rgba(255, 255, 255, 0.8);

  --pl-stars: #0b1633;
  --pl-star-opacity: .12;
  --pl-glow: rgba(255, 122, 26, .16);
  --pl-orbit: rgba(11, 22, 51, .12);
  --pl-orbit-faint: rgba(11, 22, 51, .07);
  --pl-moon: #0b1633;
  --pl-moon-2: #8a96b3;
  --pl-giant: radial-gradient(circle at 70% 30%, #3a5392, #16275a 55%, #0b1633);
  --pl-ring: rgba(255, 122, 26, .5);
  color-scheme: light;
}

body {
  background:
    radial-gradient(ellipse at 85% -10%, #12234f 0%, transparent 55%),
    linear-gradient(180deg, #081230 0%, #050b1f 100%);
  background-attachment: fixed;
  transition: background-color .35s ease, color .35s ease;
}
html[data-theme="light"] body {
  background:
    radial-gradient(ellipse at 85% -10%, #e4ebf8 0%, transparent 55%),
    linear-gradient(180deg, #fbfcfe 0%, #f2f5fa 100%);
  background-attachment: fixed;
}
code { color: var(--brand-2); }
html[data-theme="light"] code { color: #c2410c; }

/* ---------------- planetary background ---------------- */
.sky-bg .orb, .sky-bg .grid-line { display: none; }
.sky-bg { z-index: 0; }
.pl-stars {
  position: absolute; inset: 0;
  opacity: var(--pl-star-opacity);
  background:
    radial-gradient(circle at 20px 30px, var(--pl-stars) 1px, transparent 1.6px) 0 0 / 180px 160px,
    radial-gradient(circle at 90px 110px, var(--pl-stars) .8px, transparent 1.4px) 0 0 / 240px 210px;
}
.pl-system { position: absolute; right: -260px; top: -300px; width: 760px; height: 760px; }
.pl-glow { position: absolute; left: 230px; top: 230px; width: 300px; height: 300px; border-radius: 50%; background: radial-gradient(circle, var(--pl-glow), transparent 70%); }
.pl-sun {
  position: absolute; left: 350px; top: 350px; width: 60px; height: 60px; border-radius: 50%;
  background: radial-gradient(circle at 36% 32%, #ffd2a8, #ff7a1a 55%, #c2410c);
  box-shadow: 0 0 50px rgba(255, 122, 26, .55);
}
.pl-orbit { position: absolute; border-radius: 50%; border: 1px solid var(--pl-orbit); animation: pl-spin 70s linear infinite; }
.pl-orbit i { position: absolute; border-radius: 50%; }
.pl-orbit.o1 { left: 250px; top: 250px; width: 260px; height: 260px; }
.pl-orbit.o1 i { left: 122px; top: -7px; width: 14px; height: 14px; background: var(--pl-moon); }
.pl-orbit.o2 { left: 150px; top: 150px; width: 460px; height: 460px; animation-duration: 120s; animation-direction: reverse; }
.pl-orbit.o2 i { left: 52px; top: 52px; width: 22px; height: 22px; background: radial-gradient(circle at 35% 30%, #ffb27a, #ff7a1a 60%, #9a3412); }
.pl-orbit.o3 { left: 30px; top: 30px; width: 700px; height: 700px; border-style: dashed; border-color: var(--pl-orbit-faint); animation-duration: 200s; }
.pl-orbit.o3 i { left: 92px; top: 572px; width: 10px; height: 10px; background: var(--pl-moon-2); }
.pl-giant { position: absolute; left: -150px; bottom: -190px; width: 380px; height: 380px; }
.pl-giant-body { position: absolute; inset: 0; border-radius: 50%; background: var(--pl-giant); }
.pl-giant-ring { position: absolute; left: -70px; top: 150px; width: 520px; height: 80px; border-radius: 50%; border: 1.5px solid var(--pl-ring); transform: rotate(-14deg); }
@keyframes pl-spin { to { transform: rotate(360deg); } }
@media (max-width: 760px) {
  .pl-system { transform: scale(.6); transform-origin: 100% 0; right: -160px; top: -180px; }
  .pl-giant { transform: scale(.6); transform-origin: 0 100%; }
}
@media (prefers-reduced-motion: reduce) { .pl-orbit { animation: none; } }

/* ---------------- theme toggle ---------------- */
.theme-toggle {
  position: fixed; left: 18px; bottom: 18px; z-index: 120;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 14px; border-radius: 999px; cursor: pointer;
  font-size: 13px; font-weight: 700; white-space: nowrap;
  color: var(--text); background: var(--topbar-bg);
  border: 1px solid var(--border-strong); box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
  transition: transform .18s ease, border-color .18s ease;
}
.theme-toggle:hover { transform: translateY(-2px); border-color: var(--brand); }
.theme-toggle .tt-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 10px var(--brand); }

/* ---------------- the wordmark ----------------
   ClubVerse set as one word in two weights: the first half in the page's own
   text colour, the second lit in the brand gradient. Falls back to a flat
   brand colour where a gradient cannot be clipped to text. */
.wordmark { font-style: normal; letter-spacing: -.035em; font-weight: 900; }
.wordmark em {
  font-style: normal;
  color: var(--brand);
  background-image: linear-gradient(115deg, var(--brand-2), var(--brand) 62%);
  -webkit-background-clip: text;
  background-clip: text;
  /* The gradient is painted inside this element's box, and negative letter
     spacing takes that box in past the last letter - which sliced the right
     side off the final "e". The box is widened and pulled back by the same
     amount, so the paint covers the glyph and the layout does not move. */
  padding-right: .09em;
  margin-right: -.09em;
}
@supports (-webkit-text-fill-color: transparent) {
  .wordmark em { -webkit-text-fill-color: transparent; }
}
/* the header's wordmark keeps the page's text colour for the first half, which
   the generic brand-sub rule would otherwise paint orange */
.brandline .brand-sub strong.wordmark { color: var(--text); font-size: 15px; }
.login-brand h1.wordmark { margin: 20px 0 10px; line-height: .96; }

/* ---------------- brand accents (both themes) ---------------- */
.btn-primary {
  background: linear-gradient(135deg, var(--brand-2), var(--brand));
  color: var(--brand-ink);
  box-shadow: 0 14px 34px rgba(255, 122, 26, 0.22);
}
.btn-primary:hover:not(:disabled) { box-shadow: 0 18px 40px rgba(255, 122, 26, 0.32); }
.nav a.active, .tab.active {
  background: rgba(255, 122, 26, .14);
  border-color: rgba(255, 122, 26, .4);
}
.dir-chip { white-space: nowrap; }
.dir-chip.active { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.progress span { background: linear-gradient(90deg, var(--brand), var(--brand-2)); }
.hbar span { background: linear-gradient(90deg, var(--blue), var(--brand)); }
.event-card:before { background: linear-gradient(180deg, var(--brand), var(--brand-2)); }
input:focus, select:focus, textarea:focus { border-color: rgba(255, 122, 26, .6); box-shadow: 0 0 0 4px rgba(255, 122, 26, .12); }
.dir-search:focus-within { border-color: rgba(255, 122, 26, .55); }
.cal-cell.today { outline-color: rgba(255, 122, 26, .7); box-shadow: 0 0 0 4px rgba(255, 122, 26, .1); }
.vote-card.on { border-color: rgba(255, 122, 26, .6); background: rgba(255, 122, 26, .08); box-shadow: 0 0 0 3px rgba(255, 122, 26, .1); }
.msg.own .msg-bubble { background: rgba(255, 122, 26, .14); border-color: rgba(255, 122, 26, .3); }
.login-points span { background: rgba(255, 122, 26, .16); border-color: rgba(255, 122, 26, .3); color: var(--text); }
.login-brand:before { background: radial-gradient(circle, rgba(255, 122, 26, .16), transparent 66%); }
.hero-glow { background: radial-gradient(circle, rgba(255, 122, 26, .2), transparent 65%); }
.dash-card:after { background: radial-gradient(circle, rgba(255, 122, 26, .1), transparent 68%); }
.directory-hero:before { background: radial-gradient(circle, rgba(255, 122, 26, .12), transparent 68%); }
/* ---------------- official Skyroot logo ---------------- */
.on-light { display: none !important; }
html[data-theme="light"] .on-dark { display: none !important; }
html[data-theme="light"] .on-light { display: block !important; }
.brand-mark { width: min(300px, 80%); filter: none; animation: none; position: relative; z-index: 1; }
.brand-mark img { width: 100%; height: auto; display: block; }
.login-brand h1 { margin-top: 28px; }
.brandline .brand-logo { display: block; flex: 0 0 auto; }
.brandline .brand-logo img { height: 30px; width: auto; display: block; }
.brandline .brand-sub { display: block; white-space: nowrap; padding-left: 12px; border-left: 1px solid var(--border-strong); }
.brandline .brand-sub strong { font-size: 14px; color: var(--brand); letter-spacing: .02em; }
@media (max-width: 560px) { .brandline .brand-logo img { height: 24px; } }

/* surfaces that were hard-coded dark */
input, select, textarea { background: var(--input-bg); }
input:focus, select:focus, textarea:focus { background: var(--input-bg); }
select option { background: var(--surface-solid); color: var(--text); }
.topbar { background: var(--topbar-bg); }
.modal, .confirm-box { background: var(--surface-solid); }
.toast { background: var(--surface-solid); }
.login-brand, .login-card { background: var(--panel); }
.glass { background: var(--panel); }

/* ---------------- light-mode overrides ---------------- */
html[data-theme="light"] .btn,
html[data-theme="light"] .chip,
html[data-theme="light"] .check,
html[data-theme="light"] .empty,
html[data-theme="light"] .av-more,
html[data-theme="light"] .progress,
html[data-theme="light"] .hbar,
html[data-theme="light"] .hero .eyebrow,
html[data-theme="light"] .hero-tile,
html[data-theme="light"] .mini-item,
html[data-theme="light"] .quick-link,
html[data-theme="light"] .activity-pill,
html[data-theme="light"] .tab,
html[data-theme="light"] .activity-card,
html[data-theme="light"] .activity-icon,
html[data-theme="light"] .member-card,
html[data-theme="light"] .result-line,
html[data-theme="light"] .stat-tile,
html[data-theme="light"] table.data th,
html[data-theme="light"] .team-row,
html[data-theme="light"] .award-row,
html[data-theme="light"] .vote-card,
html[data-theme="light"] .cal-cell,
html[data-theme="light"] .podium-card,
html[data-theme="light"] .highlight-card,
html[data-theme="light"] .msg-bubble,
html[data-theme="light"] .msg-system .msg-bubble,
html[data-theme="light"] .modal-close,
html[data-theme="light"] .login-points li,
html[data-theme="light"] .dir-search,
html[data-theme="light"] .dir-chip:not(.active),
html[data-theme="light"] .cube-face,
html[data-theme="light"] .banner-icon {
  background: var(--fill);
  border-color: var(--border);
}
html[data-theme="light"] .btn-primary { background: linear-gradient(135deg, var(--brand-2), var(--brand)); border: none; }
html[data-theme="light"] .btn-ghost { background: transparent; border-color: transparent; }
html[data-theme="light"] .btn:hover:not(:disabled),
html[data-theme="light"] .conv-item:hover,
html[data-theme="light"] .login-points li:hover,
html[data-theme="light"] .quick-link:hover,
html[data-theme="light"] .cal-cell:hover { background: var(--fill-hover); border-color: var(--border-strong); box-shadow: none; }
html[data-theme="light"] .btn-primary:hover:not(:disabled) { background: linear-gradient(135deg, var(--brand-2), var(--brand)); box-shadow: 0 14px 30px rgba(255, 122, 26, .28); }
html[data-theme="light"] .btn-danger { background: rgba(225, 29, 72, .08); border-color: rgba(225, 29, 72, .25); color: #be123c; }
/* Hovering a page you are not on. The white letters inherited from the dark
   theme sat on a pale grey pill and all but vanished, so the text takes the
   page's own near-black instead. */
html[data-theme="light"] .nav a:hover,
html[data-theme="light"] .tab:hover { background: var(--fill); color: var(--text); }

/* The selected page. On the dark theme white letters on a dark tint are clear
   enough, but the same white on a pale background is white on white, and the
   only thing marking the current page was a faint ring. It gets the brand as a
   solid pill instead, which is unmistakable at a glance. */
html[data-theme="light"] .nav a.active,
html[data-theme="light"] .tab.active {
  color: var(--brand-ink);
  background: linear-gradient(135deg, var(--brand-2), var(--brand));
  border-color: transparent;
  box-shadow: 0 8px 20px rgba(255, 122, 26, .26);
}
html[data-theme="light"] .nav a.active:hover,
html[data-theme="light"] .tab.active:hover { color: var(--brand-ink); }
html[data-theme="light"] .tilt:hover,
html[data-theme="light"] .activity-card:hover { border-color: var(--border-strong); }
html[data-theme="light"] .chip-green, html[data-theme="light"] .status-Completed, html[data-theme="light"] .status-approved { color: #047857; background: rgba(4, 120, 87, .08); border-color: rgba(4, 120, 87, .22); }
html[data-theme="light"] .chip-blue, html[data-theme="light"] .status-Scheduled { color: #1d4ed8; background: rgba(29, 78, 216, .07); border-color: rgba(29, 78, 216, .2); }
html[data-theme="light"] .chip-amber, html[data-theme="light"] .status-pending { color: #b45309; background: rgba(180, 83, 9, .08); border-color: rgba(180, 83, 9, .22); }
html[data-theme="light"] .chip-red, html[data-theme="light"] .status-Cancelled, html[data-theme="light"] .status-rejected, html[data-theme="light"] .status-inactive { color: #be123c; background: rgba(190, 18, 60, .07); border-color: rgba(190, 18, 60, .2); }
html[data-theme="light"] .chip-violet { color: #c2410c; background: rgba(255, 122, 26, .1); border-color: rgba(255, 122, 26, .28); }
html[data-theme="light"] .form-error { color: #be123c; }
html[data-theme="light"] .cal-event { color: var(--navy); background: rgba(47, 91, 211, .1); border-color: rgba(47, 91, 211, .2); }
html[data-theme="light"] .cal-event small { color: var(--muted); }
html[data-theme="light"] .cal-cell { border-color: var(--border); }
html[data-theme="light"] .modal-backdrop, html[data-theme="light"] .confirm-backdrop { background: rgba(11, 22, 51, .35); }
html[data-theme="light"] .avatar { border-color: #fff; box-shadow: 0 6px 14px rgba(11, 22, 51, .15); }
html[data-theme="light"] .club-icon { border-color: var(--border); box-shadow: 0 8px 18px rgba(11, 22, 51, .08); }
html[data-theme="light"] .sc-faces .avatar { border-color: #fff; }
html[data-theme="light"] .club-showcase { background: var(--panel); }
html[data-theme="light"] .club-showcase:hover { box-shadow: 0 24px 60px rgba(11, 22, 51, .14); }
html[data-theme="light"] .login-points span { color: #c2410c; }