/* olloa. base styles, on top of olloa-tokens.css (which sets the body font, colours and focus ring).
   App layout values that aren't design tokens live here as --app-*. */

:root {
  --app-gutter: clamp(var(--olloa-gutter), 4vw, var(--olloa-space-10));
  --app-control-h: 48px; /* full-width study buttons */
}

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

html { -webkit-text-size-adjust: 100%; }
body { min-height: 100dvh; }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }

a { color: var(--olloa-ink); }
a:hover { color: var(--olloa-ink); }

/* Selected text is ink with light text in both themes, so it's clear what's selected, even on
   the sunken background of codes and keys. (A pale tint was hard to see there.) */
::selection { background: var(--olloa-ink); color: var(--olloa-on-ink); }

h1, h2, h3 {
  margin: 0;
  font-family: var(--olloa-font-display);
  font-weight: var(--olloa-weight-prompt);
}
h1 { font-size: var(--olloa-text-h1); line-height: var(--olloa-lh-h1); letter-spacing: var(--olloa-tr-h1); }
h2 { font-size: var(--olloa-text-h2); line-height: var(--olloa-lh-h2); letter-spacing: var(--olloa-tr-h2); }
h3 { font-size: var(--olloa-text-h3); line-height: var(--olloa-lh-h3); letter-spacing: var(--olloa-tr-h3); }

/* Every animation and transition follows the reduced-motion setting, including ones that
   don't use the duration tokens. Animations jump to their end state rather than being removed,
   so draw-ins (which start hidden) still end up drawn. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition: none !important;
  }
}