/*
 * theme.css — WRITTEN BY THE PLATFORM. Do not edit.
 *
 * Palette: Your colours (custom)
 * Source colours: #03060b #1c2333 #f7f5ec #14284d #1e3a6e #ffffff
 *
 * Every value below is either one of those five or derived from them, and each
 * one is contrast-corrected against this palette's own background. Consume
 * them with var(--token); never write a colour value in app code.
 */

:root {
  --canvas: #f7f5ec;
  --surface: #fbfbf6;
  --surface-2: #ebe9e1;
  --border: #d5d4cd;
  --border-strong: #aeada9;
  --ink: #1c2333;
  --muted: #6b6d73;
  --accent: #14284d;
  --accent-hover: #112241;
  --accent-ink: #ffffff;
  --accent-text: #1e3a6e;
  --accent-strong: #14284d;
  --accent-soft: #d7d8d6;
  --accent-border: #9199a4;
  --success: #15803d;
  --success-ink: #ffffff;
  --success-soft: #dce7d7;
  --success-strong: #116d34;
  --warning: #b45309;
  --warning-ink: #ffffff;
  --warning-soft: #efe2d1;
  --warning-strong: #a64c08;
  --danger: #b91c1c;
  --danger-ink: #ffffff;
  --danger-soft: #f0dbd3;
  --danger-strong: #b91c1c;}

/* ====================================================================
 * app.css — THIS APP'S OWN CSS. Yours to write. Ships empty.
 *
 * design.css is a FLOOR, not a ceiling.
 *
 * For a long time it was both, and the cost was measurable: an app could
 * not write a single CSS rule, so every app built here had the same 10px
 * radius, the same Public Sans at the same 15px, the same 1px borders and
 * the same soft shadow. Only fourteen COLOUR tokens ever differed. Three
 * apps in a row came out looking like the same product in three coats of
 * paint, which is what this file exists to end.
 *
 * It loads AFTER design.css and theme.css, so anything here wins.
 *
 * ---- THE FIRST LEVER: RETUNE THE SYSTEM ---------------------------
 *
 * A :root block here re-tunes every component at once — nothing is
 * restyled one class at a time. These are the tokens that decide an app's
 * CHARACTER, and they are the fastest way to make two apps look nothing
 * alike:
 *
 *   --radius-sm --radius --radius-lg   0 is brutal, 4 is crisp, 18 is soft
 *   --font-sans --font-mono            a display face changes more than colour
 *   --t-xs … --t-5xl                   the type scale, and how far it ramps
 *   --lh --lh-tight --track-tight      density and tone
 *   --s-1 … --s-12                     the spacing scale: tight or generous
 *   --shadow --shadow-raised           flat, or lifted
 *   --border --border-strong widths    hairline, or heavy and drawn
 *   --dur-1 --dur-2 --ease             brisk, or languid
 *   --content-max --measure            a wide dashboard or a narrow reading page
 *
 * COLOUR IS THE ONE EXCEPTION, and it is not a technicality: the owner
 * picked the palette on the approval card before you built anything, and
 * it is the only part of the look they chose themselves. theme.css holds
 * it. Write var(--accent), var(--ink), var(--canvas) — never a hex, an
 * rgb() or an hsl(), here or anywhere. The validator refuses those.
 *
 * ---- THE SECOND LEVER: WRITE WHAT IS NOT THERE ---------------------
 *
 * design.css covers the ordinary furniture. It does NOT cover the one
 * screen that makes this app itself — a timer's dial, a board's columns,
 * a chart, a seating plan, a game grid. Write those here, in full, and
 * name them for what they are (.dial, .board-col), never .card-2.
 *
 * Compose the primitives where they fit and write your own where they do
 * not. An app that used only the frozen classes and added nothing shipped
 * 160 component classes and zero rules of its own — and read as generated,
 * because the system's ceiling had become the app's ceiling.
 *
 * Keep using the tokens in what you write. A rule built on var(--s-4) and
 * var(--radius) stays consistent with everything around it and follows the
 * app when its character changes; one built on 16px and 10px does not.
 * ==================================================================== */

:root {
  --radius-sm: 7px;
  --radius: 11px;
  --radius-lg: 18px;
  --content-max: 1280px;
  --dur-2: 180ms;
}

/* ---------------------------------------------------------------------- */
/* Brand                                                                   */
/* ---------------------------------------------------------------------- */

.brand-tagline {
  display: block;
  font-size: var(--t-xs);
  letter-spacing: var(--track-wide);
  color: var(--muted);
  text-transform: uppercase;
  margin-top: 1px;
}

/* ---------------------------------------------------------------------- */
/* Hero band — used once per page, the one gradient moment                */
/* ---------------------------------------------------------------------- */

.hero-band {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--accent), var(--accent-hover));
  color: var(--accent-ink);
  padding: var(--s-8);
  box-shadow: var(--shadow-raised);
}

.hero-band::before,
.hero-band::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent-ink) 14%, transparent);
  pointer-events: none;
}

.hero-band::before { width: 260px; height: 260px; right: -80px; top: -100px; }
.hero-band::after { width: 160px; height: 160px; right: 120px; bottom: -90px; }

.hero-band .hero-eyebrow {
  text-transform: uppercase;
  letter-spacing: var(--track-caps);
  font-size: var(--t-xs);
  color: color-mix(in srgb, var(--accent-ink) 80%, transparent);
  font-weight: var(--fw-semi);
}

/* ---------------------------------------------------------------------- */
/* Skill / interest tags — cycle through status hues, never the accent     */
/* ---------------------------------------------------------------------- */

.tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-size: var(--t-xs);
  font-weight: var(--fw-medium);
  line-height: 1.4;
  white-space: nowrap;
}

.tag-a { background: var(--accent-soft); color: var(--accent-strong); }
.tag-b { background: var(--success-soft); color: var(--success-strong); }
.tag-c { background: var(--warning-soft); color: var(--warning-strong); }
.tag-d { background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--muted); }

/* ---------------------------------------------------------------------- */
/* Match ring — Alumni Match percentage, drawn with conic-gradient         */
/* ---------------------------------------------------------------------- */

.match-ring {
  --pct: 0%;
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: conic-gradient(var(--accent) var(--pct), var(--border) 0);
  display: grid;
  place-items: center;
}

.match-ring::before {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: var(--surface);
}

.match-ring span {
  position: relative;
  font-size: var(--t-xs);
  font-weight: var(--fw-semi);
  color: var(--accent-text);
}

/* ---------------------------------------------------------------------- */
/* Campus Time Machine — year strip + capsule card                        */
/* ---------------------------------------------------------------------- */

.year-strip {
  display: flex;
  gap: var(--s-2);
  overflow-x: auto;
  padding-bottom: var(--s-2);
  scroll-snap-type: x proximity;
}

.year-strip::-webkit-scrollbar { height: 6px; }
.year-strip::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--radius-pill); }

.year-pill {
  scroll-snap-align: center;
  flex: 0 0 auto;
  min-width: 84px;
  text-align: center;
  padding: var(--s-3) var(--s-2);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  font-weight: var(--fw-semi);
  font-size: var(--t-lg);
  color: var(--ink);
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  transition: background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
}

.year-pill:hover { transform: translateY(-2px); border-color: var(--accent-border); }

.year-pill[aria-current="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

.time-capsule {
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, var(--surface-2), var(--surface));
  border: 1px solid var(--border);
  padding: var(--s-6);
}

.memory-item {
  display: flex;
  gap: var(--s-3);
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--border);
}

.memory-item:last-child { border-bottom: none; }

.memory-dot {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  margin-top: 6px;
  border-radius: 50%;
  background: var(--accent);
}

/* ---------------------------------------------------------------------- */
/* Small helpers                                                          */
/* ---------------------------------------------------------------------- */

.profile-cover {
  height: 88px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: linear-gradient(120deg, var(--accent), var(--accent-hover));
}

.auth-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: var(--s-6);
  background: linear-gradient(160deg, var(--canvas), var(--surface-2));
}

.auth-card { width: 100%; max-width: 420px; }

@media (prefers-reduced-motion: reduce) {
  .year-pill, .card { transition: none; }
}