/*
 * RitualOS base layer: reset, document, typography, focus and motion.
 *
 * Everything here sits in @layer base, so a page's own unlayered rules still win. See the
 * layer note at the top of tokens.css.
 */

@layer base {

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

  html {
    -webkit-text-size-adjust: 100%;
    color-scheme: dark;
  }
  [data-theme="light"] { color-scheme: light; }
  @media (prefers-color-scheme: light) {
    [data-theme="system"] { color-scheme: light; }
  }

  body {
    font-family: var(--font-body);
    font-size: var(--fs-base);
    line-height: var(--lh-normal);
    color: var(--text-primary);
    background: var(--app-bg);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  /* ── the wallpaper ─────────────────────────────────────────────────────────────────────
     One fixed layer behind everything, painted with --wallpaper: a preset from
     app/lib/theme.php or the user's own image, set per request by app/shell/head.php. The
     desktop, the lock screen and the sign-in screen all show the same picture, which is what
     makes them read as one machine. Inside a window (a framed module page) it is switched
     off, so app content sits on a plain surface. */
  body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: var(--wallpaper) center / cover no-repeat, var(--app-bg);
  }
  body.is-windowed::before { display: none; }

  h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: var(--fw-semi);
    line-height: var(--lh-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--text-primary);
  }

  h1 { font-size: var(--fs-3xl); }
  h2 { font-size: var(--fs-2xl); }
  h3 { font-size: var(--fs-xl); }
  h4 { font-size: var(--fs-lg); }
  h5, h6 { font-size: var(--fs-base); }

  p { line-height: var(--lh-normal); }

  a { color: var(--accent-text); text-decoration: none; }
  a:hover { text-decoration: underline; }

  code, pre, kbd, samp { font-family: var(--font-mono); font-size: 0.95em; }

  /* Numbers in tables and stat tiles must not jitter as they update. */
  .tabular, td.num, .z-table__num { font-variant-numeric: tabular-nums; }

  hr {
    border: 0;
    border-top: 1px solid var(--border-subtle);
    margin: var(--sp-6) 0;
  }

  img, svg, video, canvas { max-width: 100%; }

  /* A single visible focus treatment for everything interactive. There was none before, so
     keyboard navigation was effectively invisible. :focus-visible keeps it off mouse clicks. */
  :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
  }

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

  /* Scrollbars, so panels do not punch a bright hole in a dark UI. */
  * {
    scrollbar-color: var(--border-strong) transparent;
    scrollbar-width: thin;
  }
  ::-webkit-scrollbar { width: 12px; height: 12px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border-radius: 0;
    border: 3px solid transparent;
    background-clip: content-box;
  }
  ::-webkit-scrollbar-thumb:hover { background-color: var(--text-faint); background-clip: content-box; }

  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }
}