/* =====================================================================
      landing.css -- the COMPONENT CSS of the anonymous screen.
   ---------------------------------------------------------------------
      RULE ZERO: this file touches level 2 (semantic) EXCLUSIVELY.
      No primitive colour -- neither hexadecimal nor the RGB or HSL functions.
      The primitive exists only in `tokens.css`, and `lint-fe` reproves any
      literal here.

      (This sentence NAMES the forms instead of writing them, and the reason is that the
      first version of it wrote them and the gate reproved the very comment
      that documented the rule. The detector does not know it is inside a
      comment -- it is DS-27, and it is the third time it has appeared in this tree.)

      A `#hex` in component CSS is not a colour: it is a theme defect
      waiting for the first customer who turns light mode on.

      NOTE on what the contract does NOT tokenise: there is no spacing family
      (`--ds-sp-*`) nor line family (`--ds-lh-*`). The first
      version of this file invented both and sixteen more names that do not
      exist -- the CSS would stay valid, `var()` falls to the empty fallback, and the
      screen would come out with no spacing at all WITHOUT ONE LINE OF ERROR. That is what
      motivated the sixth `lint-fe` check: every `var(--ds-*)` used
      has to be DECLARED in the contract.

      Spacing and line height go in literal px/rem, and that does not violate
      B-4.6: the rule is about COLOUR, and colour is what breaks when the theme changes.
   ===================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

html { color-scheme: light dark; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--ds-font);
  font-size: var(--ds-fs-body);
  line-height: 1.5;
    /* The background is EXPLICIT. A transparent `body` borrows the background of whoever
          hosts it, and the page ends up with somebody else's theme. */
  background: var(--ds-bg);
  color: var(--ds-text);
}

/* The skip link: invisible until it receives focus, and never `display:none` --
      `display:none` takes it out of Tab, which is exactly who it serves. */
.skip {
  position: absolute;
  left: 12px;
  top: -64px;
  z-index: var(--ds-z-toast);
  padding: 8px 12px;
  border-radius: var(--ds-radius-md);
  background: var(--ds-accent);
  color: var(--ds-on-accent);
  text-decoration: none;
  transition: top 120ms ease;
}
.skip:focus-visible { top: 12px; }

.topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding: 12px 20px;
  border-bottom: 1px solid var(--ds-border);
  background: var(--ds-surface);
}

/* The brand: the MEASUREMENT from the token, the art referenced, never embedded in the CSS.
      The measurements come from the design system and not from the file (LOGO-05) -- an SVG that
      carried its own size would give the brand one size per screen. */
.marca {
  inline-size: var(--ds-wordmark-w);
  block-size: var(--ds-wordmark-h);
  display: flex;
  align-items: center;
}
.marca img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
}

/* The theme swap, in all THREE states.
      `system` is the ABSENCE of `data-theme`, so it is served by
      `prefers-color-scheme`; the two explicit ones win by attribute
      specificity, and both directions are written -- the dark rule alone would leave the
      brand wrong for whoever chooses light inside a dark system. */
.marca-escura { display: none; }
.marca-clara { display: block; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .marca-clara { display: none; }
  :root:not([data-theme="light"]) .marca-escura { display: block; }
}

:root[data-theme="dark"] .marca-clara { display: none; }
:root[data-theme="dark"] .marca-escura { display: block; }
:root[data-theme="light"] .marca-clara { display: block; }
:root[data-theme="light"] .marca-escura { display: none; }

.sistema {
  display: flex;
  align-items: end;
  gap: 12px;
  flex-wrap: wrap;
}

.campo {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: var(--ds-fs-caption);
  color: var(--ds-text-2);
}

/* A NATIVE control, tinted by the token. Swapping a `<select>` for a `div` with a
      `role` costs the keyboard, the screen reader and the operating system menu. */
.campo select {
  font: inherit;
  font-size: var(--ds-fs-body-sm);
  color: var(--ds-text);
  background: var(--ds-input);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-sm);
  padding: 4px 8px;
  min-block-size: 32px;
}

/* The contract DUAL-TONE focus ring (B-4.48), which is ONE token and not a
      local composition: a single-colour ring vanishes when the customer accent
      comes close to the surface, and whitelabelling guarantees that happens one day. */
:where(a, button, select, input):focus-visible {
  outline: none;
  box-shadow: var(--ds-focus-ring);
}

.conteudo {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  max-inline-size: var(--ds-reading-max);
  margin-inline: auto;
  padding: 48px 20px;
}

h1 {
  margin: 0;
  font-size: var(--ds-fs-display);
  line-height: 1.25;
    /* `balance` on a title and `pretty` on a paragraph (B-4.107). */
  text-wrap: balance;
}

p {
  margin: 0;
  text-wrap: pretty;
}

.dica {
  color: var(--ds-text-3);
  font-size: var(--ds-fs-body-sm);
}

/* The system high contrast DISCARDS `background-color` and `box-shadow`
      (DS-32), so the contract focus ring vanishes there -- and with it every state
      marked only by a background. What is left has to be a border, which the forced mode
      preserves. */
@media (forced-colors: active) {
  :where(a, button, select, input):focus-visible {
    outline: 2px solid CanvasText;
    outline-offset: 1px;
    box-shadow: none;
  }
    /* In high contrast the system may invert the colours, and the white-ink brand
          vanishes over a light background. `forced-color-adjust: none` gives the original
          colours back, and it is one of the few surfaces where that is legitimate: the
          brand LOSES its meaning without its colour. */
  .marca img { forced-color-adjust: none; }
}