/*
 * theme.css — WRITTEN BY THE PLATFORM. Do not edit.
 *
 * Palette: Your colours (custom)
 * Source colours: #0d0922 #221c35 #faf9fd #5b3df0 #7055eb #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: #faf9fd;
  --surface: #fdfcfe;
  --surface-2: #eeedf2;
  --border: #d9d7de;
  --border-strong: #b3b1bb;
  --ink: #221c35;
  --muted: #6e6b7a;
  --accent: #5b3df0;
  --accent-hover: #4d34cc;
  --accent-ink: #ffffff;
  --accent-text: #7055eb;
  --accent-strong: #5b3df0;
  --accent-soft: #e4dffb;
  --accent-border: #b2a4f7;
  --success: #15803d;
  --success-ink: #ffffff;
  --success-soft: #dfeae6;
  --success-strong: #137638;
  --warning: #b45309;
  --warning-ink: #ffffff;
  --warning-soft: #f2e5e0;
  --warning-strong: #a64c08;
  --danger: #b91c1c;
  --danger-ink: #ffffff;
  --danger-soft: #f2dee2;
  --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.
 * ==================================================================== */

/* ---- Centerpoint's character: editorial, unhurried, almost silent ---- */
:root {
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 22px;
  --t-5xl: 4.6rem;
  --lh-tight: 1.04;
  --track-tight: -0.03em;
  --dur-2: 900ms;
  --shadow-raised: 0 30px 80px -30px color-mix(in srgb, var(--ink) 22%, transparent);
}

/* The plain shell's topbar carries only the brand mark — no border, no
   surface, so the page reads as one uninterrupted canvas rather than an app
   with a header bolted on. */
.shell-plain > div > .topbar {
  background: transparent;
  border-bottom: none;
  box-shadow: none;
}

body {
  background: var(--canvas);
}

/* The one screen. Fills whatever height .content leaves under the topbar and
   centers everything inside it, both axes. */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: calc(100svh - 6rem);
  padding: var(--s-8) var(--s-4);
  isolation: isolate;
  overflow: hidden;
}

/* A single soft radial wash behind the headline — the one moment of colour,
   used once, and nowhere near full strength. */
.hero-glow {
  position: absolute;
  inset: -20% -10%;
  z-index: -1;
  background: radial-gradient(
    closest-side,
    color-mix(in srgb, var(--accent) 16%, transparent),
    transparent 70%
  );
  filter: blur(2px);
}

.hero-mark {
  color: var(--accent);
  opacity: 0.8;
  margin-bottom: var(--s-4);
}

.hero-title {
  font-size: clamp(2.75rem, 9vw, var(--t-5xl));
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: var(--track-tight);
  color: var(--ink);
  margin: 0;
}

.hero-tagline {
  margin: var(--s-4) 0 0;
  max-width: 34ch;
  font-size: var(--t-lg);
  color: var(--muted);
  line-height: var(--lh);
}

.hero-clock {
  margin-top: var(--s-8);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-1);
  padding: var(--s-4) var(--s-6);
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}

.hero-time {
  font-family: var(--font-mono);
  font-size: var(--t-xl);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  color: var(--accent-text);
}

.hero-date {
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}

@media (prefers-reduced-motion: no-preference) {
  .hero-title,
  .hero-tagline,
  .hero-clock {
    animation: hero-rise var(--dur-2) ease-out both;
  }
  .hero-tagline {
    animation-delay: 80ms;
  }
  .hero-clock {
    animation-delay: 160ms;
  }
  @keyframes hero-rise {
    from {
      opacity: 0;
      transform: translateY(10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

@media (max-width: 480px) {
  .hero-clock {
    width: 100%;
  }
}