/* One Ring Reptiles — STYLES (single entry point)
   v1.0 · Owner: Steven Scatina · 2026-08-31

   This is what a static HTML file or a Claude Design artboard links:
     <link rel="stylesheet" href="../styles.css">

   Order matters. Tokens first, then aliases (which read tokens), then base,
   then components (which read aliases only).

   Devs building the Next.js app import theme.css instead. Both are generated
   from the same tokens, so they cannot drift. */

@import url("tokens/colors.css");
@import url("tokens/fonts.css");
@import url("tokens/typography.css");
@import url("tokens/spacing.css");
@import url("tokens/geometry.css");
@import url("tokens/aliases.css");
@import url("components.css");

/* ---- Document base ---- */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: var(--text-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }

ul, ol { margin: 0; padding-left: 1.15em; }
li { margin: 0 0 var(--space-0-5); }

hr { border: 0; height: var(--hairline); background: var(--border-subtle); margin: 0; }

::selection { background: var(--cta-bg); color: var(--cta-fg); }

:focus-visible { outline: none; box-shadow: var(--ring); }

/* ---- Layout helpers ---- */

.wrap    { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--gutter); }
.prose   { max-width: var(--max-prose); }
.stack   { display: flex; flex-direction: column; }
.row     { display: flex; align-items: center; }
.grid    { display: grid; }
.grid-3  { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.grid-2  { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.section { padding: var(--section-y) 0; }

@media (max-width: 1024px) {
  .wrap   { padding: 0 var(--gutter-md); }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .wrap    { padding: 0 var(--gutter-sm); }
  .grid-3,
  .grid-2  { grid-template-columns: minmax(0, 1fr); }
  .section { padding: var(--section-y-sm) 0; }
  .display-1 { font-size: 44px; }
  .display-2 { font-size: 34px; }
  /* 36px controls are desktop chrome only. On a phone everything is 44. */
  .btn--sm { height: var(--control-md); }
}

/* ---- Print ---- */

@media print {
  body { background: var(--color-paper); color: var(--color-paper-ink); }
  .btn, .announce, .nav { display: none; }
  a { color: var(--color-paper-ink); text-decoration: underline; }
}