/* =====================================================================
   OSE · base layer: reset, element defaults, surfaces.
   Uses SEMANTIC tokens only. Load after styles/tokens/*.css.
   ===================================================================== */

@layer base, components, page;

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

  * {
    margin: var(--space-none);
  }

  html {
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
    scroll-padding-block-start: var(--size-nav);
  }

  body {
    min-block-size: 100%;
    background-color: var(--color-bg);
    color: var(--color-text);
    font: var(--text-body);
    letter-spacing: var(--text-body-tracking);
    font-synthesis-weight: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  /* Surfaces paint themselves; tokens re-map inside them (semantic.css). */
  [data-surface],
  .theme-light,
  .theme-dark {
    background-color: var(--color-bg);
    color: var(--color-text);
  }

  :root,
  [data-surface="cream"],
  .theme-light {
    color-scheme: light;
  }

  [data-surface="navy"],
  [data-surface="night"],
  .theme-dark {
    color-scheme: dark;
  }

  img,
  picture,
  video,
  canvas {
    display: block;
    max-inline-size: 100%;
  }

  img,
  video {
    block-size: auto;
  }

  input,
  button,
  textarea,
  select {
    font: inherit;
    letter-spacing: inherit;
    color: inherit;
  }

  p,
  li,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    overflow-wrap: break-word;
  }

  p {
    text-wrap: pretty;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    text-wrap: balance;
  }

  /* Headings: the heading family. H1 and H2 at 800 with tightened tracking,
     H3 at 600; line-height never below 1.2 (Vietnamese stacked diacritics). */
  h1 {
    font: var(--text-h1);
    letter-spacing: var(--text-h1-tracking);
  }

  h2 {
    font: var(--text-h2);
    letter-spacing: var(--text-h2-tracking);
  }

  h3 {
    font: var(--text-h3);
    letter-spacing: var(--text-h3-tracking);
  }

  /* Minor headings: body size in the UI family at 600 (the body family has
     only 400, so a heavier weight there would not render). */
  h4,
  h5,
  h6 {
    font: var(--text-body);
    font-family: var(--font-family-ui);
    font-weight: var(--weight-medium);
  }

  /* Emphasis in body text: the body family has only 400 and weight synthesis
     is off, so b / strong switch to the UI family at 600. Never 700 or bold. */
  b,
  strong,
  th {
    font-family: var(--font-family-ui);
    font-weight: var(--weight-strong);
  }

  /* Inside a heading, emphasis keeps the heading's own family and weight. */
  :is(h1, h2, h3, h4, h5, h6) :is(b, strong) {
    font: inherit;
  }

  small {
    font-size: var(--text-small-size);
  }

  a {
    color: inherit;
    text-decoration-thickness: var(--border-width-hairline);
    text-underline-offset: var(--underline-offset);
  }

  ::selection {
    background-color: var(--color-selection);
    color: var(--color-selection-text);
  }

  /* Focus: 2px lilac ring + navy halo. The transparent outline becomes
     visible in forced-colors mode, where box-shadow is dropped. */
  :focus-visible {
    outline: var(--border-width-thick) solid var(--color-none);
    box-shadow: var(--shadow-focus);
  }

  :focus:not(:focus-visible) {
    outline: none;
  }

  [hidden] {
    display: none !important;
  }

  .visually-hidden {
    position: absolute;
    inline-size: var(--border-width-hairline);
    block-size: var(--border-width-hairline);
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}