/* Theme tokens. Dark-mode overrides will be added later under
 * :root[data-theme="dark"]. */

:root {
  --text-primary:    #334155;  /* SLATE_700 */
  --text-strong:     #2d2d2d;  /* GRAY_800  */
  --text-secondary:  #454545;  /* GRAY_700  */
  --text-muted:      #757575;  /* GRAY_500  */
  --text-on-accent:  #ffffff;

  --surface:           #ffffff;
  --surface-alt:       #f2f2f2;  /* GRAY_100 */
  --surface-strong:    #e4e4e4;  /* GRAY_200 */
  --surface-rail:      #2d2d2d;  /* GRAY_800 */
  --surface-terminal:  #ffffff;

  --accent:        #0071ff;  /* SKY_600 */
  --accent-hover:  #0048b0;  /* SKY_800 */
  --accent-soft:   #a7d2ff;  /* SKY_300 */

  --danger:   #db3339;  /* RED_500   */
  --warning:  #dc9315;  /* AMBER_500 */
  --success:  #1aad53;  /* GREEN_500 */
}

/* Reset based on minireset.css v0.0.6 (MIT, jgthms). */
html, body, p, ol, ul, li, dl, dt, dd, blockquote, figure, fieldset, legend,
textarea, pre, iframe, hr, h1, h2, h3, h4, h5, h6 { margin: 0; padding: 0; }
h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal; }
ul { list-style: none; }
button, input, select { margin: 0; }
html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }
img, video { height: auto; max-width: 100%; }
iframe { border: 0; }
table { border-collapse: collapse; border-spacing: 0; }
td, th { padding: 0; }

body {
  font-family: Inter, "SF Pro", "Segoe UI", Roboto, Oxygen, Ubuntu, "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: var(--text-primary);
  line-height: 1.5;
  background: var(--surface);
}

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

/* Typography shared between landing and viewer. */
.landing h1, .viewer h1 {
  font-size: 2.5em;
  font-weight: 600;
  line-height: 1.125;
}
.landing h2, .viewer h2 {
  font-size: 1.5em;
  font-weight: 600;
}
.landing h3, .viewer h3 {
  font-size: 1.25em;
  font-weight: 600;
}
.landing :is(p, li), .viewer :is(p, li) { font-size: 1.25em; }

/* Both landing and viewer use a 3-column grid: content in the middle
 * column (≤ 60rem), 1fr gutters on either side give a page-with-margins
 * feel and keep the content centered in the viewport. */
.landing, .viewer {
  display: grid;
  grid-template-columns: 1fr minmax(0, 60rem) 1fr;
  gap: 1.5rem;
  padding: 2rem;
}
.landing > *, .viewer > * { grid-column: 2; }

/* Landing: blocks centered both axes. */
.landing {
  min-height: 100vh;
  justify-items: center;
  align-content: center;
  color: var(--text-strong);
}
.landing h1, .landing p { text-align: center; }

.landing .cta {
  display: inline-block;
  padding: 0.5em 1.25em;
  border-radius: 4px;
  background-color: var(--accent);
  color: var(--text-on-accent);
  font-size: 1.125em;
  font-weight: 500;
  border: none;
  cursor: pointer;
  font-family: inherit;
}
.landing .cta:hover { background-color: var(--accent-hover); }

.landing .alert {
  max-width: 850px;
  background-color: var(--surface-alt);
  color: var(--text-strong);
  border-radius: 4px;
  padding: 1.375em 1.5em;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  align-items: start;
  text-align: left;
}
.landing .alert svg { fill: var(--danger); }

.landing .contact {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.5rem;
  font-size: 1.1em;
  color: var(--text-muted);
}
.landing .contact .sep { color: var(--surface-strong); }
.landing .contact a { display: inline-flex; }
.landing .contact img { width: 26px; height: 26px; }
.landing .contact a:hover img { opacity: 0.6; }

/* Inline code. Used by the code brand's landing page and any viewer
 * with code spans; harmless elsewhere. */
.landing code, .landing .accent, .viewer code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
.landing code, .viewer code {
  color: var(--accent);
  background: var(--surface-alt);
  padding: 0.1em 0.3em;
  border-radius: 4px;
  font-size: 0.9em;
}

/* Viewer: top-aligned, scrollable. */
.viewer {
  box-sizing: border-box;
  height: 100%;
  overflow-y: auto;
  align-content: start;
}