/* css/socle.css
   The page itself, for every rewritten page (layer base, declared in
   css/tokens.css): the box model, the ground, the running text, the links.
   Values only through the variables of tokens.css. */

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

  /* The ground: the solid graphite at night, the porcelain gradients by
     day (both in --cs-ground). */
  html { background: var(--cs-ground); }

  body {
    margin: 0;
    color: var(--cs-fg);
    font-family: var(--cs-sans);
    /* The native controls (radios, boxes, scrollbars of a box) at night
       or by day with the theme. */
    color-scheme: var(--cs-scheme);
  }

  a { color: inherit; text-decoration: none; }

  button, input, select, textarea { font: inherit; color: inherit; }
  button { cursor: pointer; }

  img { display: block; }

  /* The keyboard's outline in the gold of the brand. */
  :focus-visible { outline-color: var(--cs-gold); }
}

@layer utilitaires {
  /* Hidden means hidden, whatever display a component gives the element:
     the highest layer, so no component has to repeat it. */
  [hidden] { display: none; }
  /* The radios a choice group draws as buttons stay in the form, unseen
     (js/md-chips.js). */
  .md-mirrored { display: none; }
}