/* ============================================================
   XIME Platform | shared/theme.css | v1.0 | 16 July 2026
   Identity: xime-platform repo, qcufru backend.
   Campus palette (daily surfaces) + prestige palette (honors).
   ============================================================ */

:root {
  /* Campus palette: same ink, brighter paint */
  --x-red: #E91F27;
  --x-red-dark: #B8151C;
  --x-ink: #0D1F35;
  --x-ink-soft: #26374D;
  --x-paper: #FAF8F3;
  --x-card: #FFFFFF;
  --x-line: #E5E0D5;
  --x-muted: #6B7280;

  --x-violet: #6D28D9;
  --x-violet-bg: #EDE7FD;
  --x-violet-ink: #3D1E86;
  --x-violet-sub: #6D4FC4;

  --x-teal: #0F9B76;
  --x-teal-bright: #2DD4A7;
  --x-teal-bg: #DCF5EC;
  --x-teal-ink: #07553F;
  --x-teal-sub: #23926F;

  --x-amber: #D97706;
  --x-amber-bg: #FCEEDA;
  --x-amber-ink: #7C3A06;
  --x-amber-sub: #C07020;

  --x-rose: #EDA6A3;
  --x-rose-bg: #FBE7EE;
  --x-rose-ink: #8E1E42;
  --x-rose-sub: #CE5480;

  /* Prestige palette: reserved for honors, ceremony, recognition */
  --p-navy: #192A56;
  --p-navy-soft: #2C3D69;
  --p-champagne: #F7D794;
  --p-champagne-ink: #5A400C;
  --p-rose: #EDA6A3;
  --p-pearl: #FCFBFB;

  --x-radius: 16px;
  --x-radius-lg: 24px;
  --x-font: 'DM Sans', system-ui, -apple-system, sans-serif;
  --x-mono: 'DM Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; }

html { font-size: 17px; }

body {
  margin: 0;
  font-family: var(--x-font);
  background: var(--x-paper);
  color: var(--x-ink);
  min-height: 100vh;
}

.x-shell {
  max-width: 480px;
  margin: 0 auto;
  padding: 20px 20px 48px;
}

.x-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0 8px;
}

.x-wordmark {
  font-weight: 800;
  font-size: 24px;
  letter-spacing: 1px;
  color: var(--x-red);
  text-decoration: none;
}

.x-wordmark img { height: 30px; display: block; }

.x-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--x-ink);
  color: var(--x-paper);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  border: none;
  cursor: pointer;
}

.x-greet { margin: 8px 0 0; }
.x-greet h1 { margin: 0; font-size: 26px; font-weight: 800; }
.x-greet p { margin: 4px 0 0; font-size: 14px; color: var(--x-muted); }

.x-hero {
  margin-top: 18px;
  background: var(--x-ink);
  border-radius: var(--x-radius);
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--x-paper);
}

.x-hero.warn { background: var(--x-amber-ink); }

.x-hero-title { margin: 0; font-size: 15px; font-weight: 700; }
.x-hero-sub { margin: 3px 0 0; font-size: 13px; color: #9AA8BC; }
.x-hero.warn .x-hero-sub { color: #F3CFA0; }

.x-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 18px;
}

.x-tile {
  border-radius: var(--x-radius);
  padding: 16px 14px;
  text-decoration: none;
  display: block;
  border: none;
  text-align: left;
  cursor: pointer;
  font-family: var(--x-font);
}

.x-tile h3 { margin: 10px 0 0; font-size: 15px; font-weight: 700; }
.x-tile p { margin: 3px 0 0; font-size: 12px; }
.x-tile .ti { font-size: 24px; }

.x-tile.violet { background: var(--x-violet-bg); }
.x-tile.violet h3 { color: var(--x-violet-ink); }
.x-tile.violet p, .x-tile.violet .ti { color: var(--x-violet-sub); }

.x-tile.teal { background: var(--x-teal-bg); }
.x-tile.teal h3 { color: var(--x-teal-ink); }
.x-tile.teal p, .x-tile.teal .ti { color: var(--x-teal-sub); }

.x-tile.amber { background: var(--x-amber-bg); }
.x-tile.amber h3 { color: var(--x-amber-ink); }
.x-tile.amber p, .x-tile.amber .ti { color: var(--x-amber-sub); }

.x-tile.rose { background: var(--x-rose-bg); }
.x-tile.rose h3 { color: var(--x-rose-ink); }
.x-tile.rose p, .x-tile.rose .ti { color: var(--x-rose-sub); }

.x-tile.navy { background: var(--x-ink); }
.x-tile.navy h3 { color: var(--x-paper); }
.x-tile.navy p, .x-tile.navy .ti { color: #9AA8BC; }

.x-tile[data-soon="1"] { opacity: 0.55; }

.x-badge-soon {
  display: inline-block;
  margin-top: 6px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: var(--x-muted);
  background: rgba(13, 31, 53, 0.08);
  border-radius: 999px;
  padding: 2px 8px;
}

.prestige {
  background: var(--p-navy);
  color: var(--p-pearl);
  border-radius: var(--x-radius);
  padding: 16px;
}

.prestige .accent { color: var(--p-champagne); }

.x-btn {
  display: inline-block;
  width: 100%;
  background: var(--x-red);
  color: #fff;
  font-family: var(--x-font);
  font-size: 15px;
  font-weight: 700;
  border: none;
  border-radius: 999px;
  padding: 13px 20px;
  cursor: pointer;
  text-align: center;
}

.x-btn:active { background: var(--x-red-dark); }
.x-btn[disabled] { opacity: 0.6; cursor: default; }

.x-card {
  background: var(--x-card);
  border: 1px solid var(--x-line);
  border-radius: var(--x-radius);
  padding: 20px;
  margin-top: 20px;
}

.x-field { margin-bottom: 14px; }
.x-field label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 6px; }
.x-field input {
  width: 100%;
  font-family: var(--x-font);
  font-size: 15px;
  padding: 12px 14px;
  border: 1px solid var(--x-line);
  border-radius: 12px;
  background: var(--x-paper);
  color: var(--x-ink);
}
.x-field input:focus { outline: 2px solid var(--x-violet); outline-offset: 1px; }

.x-msg { font-size: 13px; margin-top: 10px; }
.x-msg.error { color: var(--x-red-dark); font-weight: 700; }

.x-foot {
  margin-top: 28px;
  text-align: center;
  font-family: var(--x-mono);
  font-size: 11px;
  color: var(--x-muted);
}

#deploy-guard-banner {
  display: none;
  background: #B8151C;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  text-align: center;
  padding: 12px;
}

.hidden { display: none; }