@import url("/fonts.css");
@import url("/app-theme.css");

/* Legacy web names map to the authoritative application palette. */
:root {
  --flame: oklch(var(--lcc-brand));
  --flame-deep: oklch(var(--lcc-brand-text));
  --flame-solid: oklch(var(--lcc-brand-solid));
  --flame-solid-hover: oklch(var(--lcc-brand-hover));
  --flame-wash: oklch(var(--lcc-brand-wash));
  --paper: oklch(var(--lcc-surface-canvas));
  --paper-sunk: oklch(var(--lcc-surface-sunk));
  --ink: oklch(var(--lcc-text-primary));
  --ink-soft: oklch(var(--lcc-text-secondary));
  --ink-faint: oklch(var(--lcc-text-muted));
  --rule: oklch(var(--lcc-border));
  --rule-strong: oklch(var(--lcc-border-strong));
  --go: oklch(var(--lcc-success));
  --go-wash: oklch(var(--lcc-success-wash));
  --danger: oklch(var(--lcc-danger));
  --warn: oklch(var(--lcc-warn));
  --warn-wash: oklch(var(--lcc-warn-wash));
  --danger-wash: oklch(var(--lcc-danger-wash));
  --info: oklch(var(--lcc-info));
  --info-wash: oklch(var(--lcc-info-wash));
  --on-flame: oklch(var(--lcc-on-brand));
  --on-flame-strong: oklch(var(--lcc-on-brand));
  --on-flame-sub: oklch(var(--lcc-on-brand));
  --on-flame-closer: oklch(var(--lcc-on-brand));
  --on-flame-note: oklch(var(--lcc-on-brand));
  --on-flame-eyebrow: oklch(var(--lcc-on-brand));
  --btn-on-flame-fg: oklch(var(--lcc-brand-text));
  --btn-on-flame-bg: oklch(var(--lcc-surface));
  --btn-on-flame-bg-hover: oklch(var(--lcc-surface-hover));
  --btn-on-flame-border: oklch(var(--lcc-border-strong));
  --btn-on-flame-border-hover: oklch(var(--lcc-text-primary));
  --nav-bg: oklch(var(--lcc-surface-canvas));
  --surface: oklch(var(--lcc-surface));
  --surface-demo: oklch(var(--lcc-surface-canvas));
  --surface-said: oklch(var(--lcc-surface-hover));
  --surface-scene: oklch(var(--lcc-surface-active));
  --rule-card: oklch(var(--lcc-border));
  --focus-ring: oklch(var(--lcc-focus-ring));
  --focus-ring-on-flame: oklch(var(--lcc-dark-focus-ring));
  --hero-bg: oklch(var(--lcc-dark-surface-canvas));
  --scene-win: oklch(var(--lcc-dark-surface-canvas));
  --scene-tile: oklch(var(--lcc-dark-surface));
  --scene-ctrl: oklch(var(--lcc-dark-text-muted));
  --shadow-ch: var(--lcc-shadow);
  --measure: 68ch;
  --gutter: clamp(1.25rem, 5vw, 5.5rem);
  --shell: 1240px;
  --on-button-hover: var(--on-flame);
  --font-sans: Geist, ui-sans-serif, system-ui, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, monospace;
}
/* ------------------------------------------------------- focus + links --- */

/* There was previously no focus style anywhere on this site, which made the
   whole signup funnel unusable by keyboard. One ring, everywhere. */
:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: 3px;
}

/* On the orange band the standard ring disappears, so it inverts there. */
.hero :focus-visible,
.closer :focus-visible {
  outline-color: var(--focus-ring-on-flame);
}

/* Anchors inherit their colour by default; the two classes below opt into a
   link treatment deliberately. Without this the portal's links fell back to the
   browser's purple, which matched nothing. */
a { color: inherit; }

/* --------------------------------------------------------- theme toggle --- */

.theme-toggle { display: flex; gap: 2px; padding: 3px; border: 1px solid var(--rule); border-radius: 999px; }
.theme-toggle button {
  display: grid; place-items: center; width: 30px; height: 30px;
  border: 0; border-radius: 999px; background: none; color: var(--ink-soft);
  cursor: pointer; transition: background-color 150ms ease-out, color 150ms ease-out;
}
.theme-toggle button:hover { color: var(--ink); background: var(--paper-sunk); }
.theme-toggle button[aria-pressed="true"] { color: var(--ink); background: var(--paper-sunk); }
.theme-toggle svg { width: 16px; height: 16px; }
/* Hidden until theme.js runs: without scripting the control does nothing, so
   showing it would be a lie. The page still follows prefers-color-scheme. */
.theme-toggle[hidden] { display: none; }

/* Two link behaviours, shared by the site and the portal.

   Navigational links carry no underline at rest and gain one on hover AND on
   focus. Body-copy links are underlined at rest, because a link inside a
   paragraph should never rely on colour alone to be recognisable. */

.link-nav {
  text-decoration: none;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 2px;
  transition: color 150ms ease-out;
}
.link-nav:hover,
.link-nav:focus-visible { text-decoration: underline; color: var(--ink); }

.link-inline {
  color: var(--flame-deep);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
  transition: color 150ms ease-out, text-decoration-thickness 150ms ease-out;
}
.link-inline:hover,
.link-inline:focus-visible { text-decoration-thickness: 2px; }

/* ------------------------------------------------------------ skip link --- */

.skip-link {
  position: absolute; left: 0.5rem; top: 0.5rem; z-index: 100;
  padding: 0.7rem 1rem; border-radius: 8px;
  background: var(--paper); color: var(--ink); border: 1px solid var(--rule-strong);
  font-weight: 600; text-decoration: none;
  transform: translateY(-160%);
}
.skip-link:focus-visible { transform: translateY(0); }

.theme-toggle { flex-shrink: 0; width: max-content; }
.theme-toggle button { color: var(--ink-soft); min-height: 36px; width: 36px; padding: 0; font: inherit; }
.theme-toggle button:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.brand img, .brand-symbol img, .auth-mark img { object-fit: contain; }

/* The application's brighter dark hover fill needs dark ink for small labels. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --on-button-hover:oklch(var(--lcc-dark-surface-canvas)); }
}
:root[data-theme="dark"] { --on-button-hover:oklch(var(--lcc-dark-surface-canvas)); }