/*
 * App-level styles that sit BETWEEN the generated tokens (maluce-tokens.css, exact copy of tokens.json)
 * and the verbatim component stylesheet (maluce-components.css). Everything here is either
 *   (a) needed by the guide's components but NOT defined in tokens.json (ASSUMED, see below), or
 *   (b) MaLuce.Web's own glue (the reset and base element styles).
 * No color literals: every color is a token. That is enforced by a test.
 */

/* ---- (a) ASSUMED values: referenced by the guide's bundle.css / bundle.js but absent from tokens.json ----
 * The guide's components use the type styles label, body-sm, heading-sm and mono-md and the spacing step
 * space-16, none of which tokens.json defines. These values are this app's best fit to the defined scale
 * (body 15px, caption 12px, code 12px, button-label 14px) and MUST be confirmed by the owner and added to the
 * guide. Recorded in the PR and in docs/design-system/SYNC.md. */
:root {
  --space-16: 64px;
}

.label {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.3;
  font-weight: 600;
}

.body-sm {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.4;
  font-weight: 400;
}

.heading-sm {
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 1.3;
  font-weight: 800;
  letter-spacing: -0.3px;
}

.mono-md {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.4;
  font-weight: 500;
}

/* The guide sets the eyebrow uppercase via CSS, never typed capitals. */
.eyebrow {
  text-transform: uppercase;
}

/* ---- Reset (AB#336) ----
 * Bootstrap used to be the app's reset as well as its utility library. It is gone, so the handful of base rules the
 * pages and the guide's components quietly depended on live here: border-box sizing, no body margin, the heading,
 * paragraph and list margins the spacing was tuned against, form controls that inherit the page font, and
 * [hidden] actually hiding. Nothing here is a design decision; it is the browser's defaults made predictable. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* The app is dark: native scrollbars, select popups and date pickers should be too. Bootstrap set this from
 * data-bs-theme="dark" on <html>; with it gone the app says so itself. */
html {
  color-scheme: dark;
}

body {
  margin: 0;
}

h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 0.5rem;
}

p {
  margin-top: 0;
  margin-bottom: 1rem;
}

dl, ol, ul {
  margin-top: 0;
  margin-bottom: 1rem;
}

dd {
  margin-bottom: 0.5rem;
  margin-left: 0;
}

ol, ul {
  padding-left: 2rem;
}

img, svg {
  vertical-align: middle;
}

th {
  text-align: inherit;
}

label {
  display: inline-block;
}

fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

/* A legend spans the fieldset's width and clears the content after it, with a bottom margin: the layout the forms were
 * tuned against (the "Billing address" title and the plan picker's title both sit above their fields this way). */
legend {
  float: left;
  width: 100%;
  margin-bottom: 0.5rem;
  padding: 0;
  line-height: inherit;
}

legend + * {
  clear: left;
}

button, input, select, textarea {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

button, select {
  text-transform: none;
}

textarea {
  resize: vertical;
}

[hidden] {
  display: none !important;
}

/* ---- (b) Base element styles. The app is dark-first: <body data-theme="dark">. ---- */
body {
  background: var(--surface-page);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.4;
}

/* Focus is never suppressed. Same ring as the components (2px, 2px offset, focus-ring token). */
:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

a {
  color: var(--brand);
}

a:hover {
  color: var(--brand-light);
}

/* Phone numbers, ids and other system strings are set in the mono family. Use on the element itself. */
.mono {
  font-family: var(--font-mono);
}

/* ---- Toast host (the guide ships only the toast card; positioning and stacking are the app's job) ---- */
.ml-toast-host {
  position: fixed;
  right: var(--space-4);
  bottom: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  z-index: 1100;
}

/* ---- Modal height (the guide's modal has no maximum, so a tall dialog ran off the screen with its buttons unreachable) ----
   A dialog never grows taller than the window; past that, its own contents scroll. */
.ml-modal {
  max-height: calc(100dvh - var(--space-8));
  overflow-y: auto;
}