/* =============================================================================
 * brand.css — the Stacks identity (wordmark lockup + icon tiles), D-153.
 *
 * Source of truth: claude.ai/design project "Team Portal (V4)" →
 * "Stacks Brand Kit.dc.html" ("This file is the brand source of truth — roll it
 * into the project template as-is"). LIGHT-MODE application set only.
 *
 * TODO(dark-mode): the kit ships a full DARK application set (dark tile
 * gradient #14223C→#060E1C, border #2A3E63, glow icon #g5d, white wordmark
 * letters, byline #8A94A8). Implement it as theme variants of these classes
 * when the dark design system lands (post-modules). The `--on-dark` modifiers
 * below exist ONLY for the light design's own dark surfaces (the login hero),
 * not as a dark mode.
 *
 * Loaded by every branded head (base/login/auth/onboarding/setup) — these
 * pages do not all share components.css, so the brand layer is standalone.
 * The gradient/hex literals are BRAND-KIT constants (allowlisted, like the
 * login hero ramp): they are the artwork, not UI tokens.
 * ========================================================================= */

/* Montserrat 700 — the wordmark display face ONLY (kit stack: Montserrat →
   Inter). Self-hosted per the CSP/fonts precedent (D-146; latin subset,
   fonts.gstatic.com v31). Never use it for UI text — Inter carries the UI. */
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/Montserrat-Bold.woff2") format("woff2");
}

/* ---- icon tile --------------------------------------------------------------
   The kit tile: soft white ramp, hairline border, ~22.5% corner radius at every
   size on the ladder (27/116 … 3.6/16). Size comes from the host (width/height
   or a size class below); the SVG fills the box. */
.st-tile {
  display: block;
  background: linear-gradient(180deg, #FFFFFF 0%, #F1F5FB 60%, #E4EBF6 100%);
  border: 1px solid #D9E1EE;
  border-radius: 22.5%;
  flex-shrink: 0;
  box-sizing: border-box;
}

.st-tile > img,
.st-tile > svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Dark-GROUND tile (kit dark set) — for dark surfaces inside the light design
   (login hero). TODO(dark-mode): becomes the default tile under the dark theme. */
.st-tile--on-dark {
  background: linear-gradient(180deg, #14223C 0%, #0A1424 50%, #060E1C 100%);
  border-color: #2A3E63;
}

/* Tile size steps used by the portal chrome (kit ladder values). */
.st-tile--26 { width: 26px; height: 26px; }  /* portal nav chip */
.st-tile--34 { width: 34px; height: 34px; }  /* auth card mark / hero chip */
.st-tile--46 { width: 46px; height: 46px; }  /* session-expired card */

/* ---- wordmark lockup --------------------------------------------------------
   ST + the A-glyph (gradient triangle) + CKS. Montserrat 700, tracking ≈ 11.5%
   of the letter size, glyph ≈ 77% of the letter size (kit: 4/34 @44, 1.5/10 @13).
   The glyph SVG is inline in the macro (macros/brand.html) so it never needs a
   network fetch; letters inherit `color` — ink by default, white via --on-dark. */
.st-lockup {
  display: inline-flex;
  align-items: center;
  font-family: "Montserrat", var(--tp-font-ui);
  font-weight: 700;
  line-height: 1;
  color: var(--tp-ink);
  white-space: nowrap;
}

.st-lockup-seg {
  font-size: var(--st-lockup-size, 13px);
  letter-spacing: var(--st-lockup-track, 1.5px);
  line-height: 1;
}

.st-lockup-a {
  display: block;
  width: var(--st-lockup-glyph, 10px);
  height: var(--st-lockup-glyph, 10px);
  margin: 0 1.5px 0 0.5px;
}

/* White letters on dark grounds (login hero). The A-glyph gradient is shared.
   TODO(dark-mode): the dark theme flips the default to this. */
.st-lockup--on-dark { color: #FFFFFF; }

/* Chip scale (13px — kit PORTAL NAV) is the custom-property default above.
   Launch scale (16px — kit LAUNCH SCREEN) for the onboarding/setup headers: */
.st-lockup--16 {
  --st-lockup-size: 16px;
  --st-lockup-track: 1.6px;
  --st-lockup-glyph: 12.5px;
}
.st-lockup--16 .st-lockup-a { margin: 0 1.5px 0 0.5px; }

/* ---- byline -----------------------------------------------------------------
   "by Wash Associates" — Inter (inherits the UI face), muted. */
.st-byline {
  font-size: 11px;
  font-weight: 400;
  color: var(--tp-muted);
  line-height: 1.25;
}

/* TODO(dark-mode): reserved for the D-153 dark application set — intentionally
   unreferenced in the light-only portal. */
.st-byline--on-dark { color: rgba(255, 255, 255, 0.6); }

/* ---- secondary-auth lockup (D-153, "1C Hero") -------------------------------
   The secondary auth screens (forgot / reset / set-pin / activate / session-
   expired) lead with the full wordmark lockup instead of the bare tile: a 42px
   glass tile (brand glow) + the 24px ST▲CKS wordmark over a micro byline, as a
   horizontal chip (macros/brand.html `stacks_auth_lockup`). The host
   (.au-brand / .se-logo, auth.css) centers it on desktop / left-aligns on
   phone. See docs/design-deltas.md. */
.st-tile--42 { width: 42px; height: 42px; }  /* secondary-auth lockup (1C) */

/* Hero wordmark scale (24px — the secondary-auth lockup). */
.st-lockup--24 {
  --st-lockup-size: 24px;
  --st-lockup-track: 2.4px;
  --st-lockup-glyph: 18.7px;
}
.st-lockup--24 .st-lockup-a { margin: 0 2.2px 0 0.8px; }

/* Micro byline — the tracked uppercase variant under the 24px hero wordmark. */
.st-byline--micro {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.6px;
  text-transform: uppercase;
}

.st-authlock {
  display: inline-flex;
  align-items: center;
  gap: 13px;
}
.st-authlock .st-tile {
  box-shadow: 0 10px 24px rgba(15, 30, 60, 0.12), 0 0 30px rgba(46, 107, 255, 0.10);
}
.st-authlock-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
}