/* ===========================================================================
   RowLink — Base / reset / typography
   Depends on: tokens.css
   Sprint 02 — Design System & Frontend Foundation
   =========================================================================== */

/* -----------------------------------------------------------------
   Reset (modern + minimal, not Bootstrap-shaped)
   ----------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--rl-color-bg);
  color: var(--rl-color-text-primary);
  font-family: var(--rl-font-display);
  font-size: var(--rl-fs-body);
  font-weight: var(--rl-fw-regular);
  line-height: var(--rl-lh-body);
  font-feature-settings: 'kern' 1, 'liga' 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  min-height: 100dvh;
}

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

h1 { font-size: var(--rl-fs-h1-page); letter-spacing: var(--rl-tracking-h1); }
h2 { font-size: var(--rl-fs-h2-section); letter-spacing: var(--rl-tracking-h1); }
h3 { font-size: var(--rl-fs-h3-card); }
h4 { font-size: var(--rl-fs-h2-card); }
h5, h6 { font-size: var(--rl-fs-secondary); }

p {
  margin: 0 0 var(--rl-space-3) 0;
  color: var(--rl-color-text-primary);
}

p:last-child { margin-bottom: 0; }

ul, ol {
  margin: 0;
  padding-left: var(--rl-space-7);
}

a {
  color: var(--rl-color-link);
  text-decoration: none;
  font-weight: var(--rl-fw-semi);
  transition: color var(--rl-duration-default) var(--rl-ease-standard);
}

a:hover {
  color: var(--rl-color-link-hover);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--rl-color-focus-ring);
  outline-offset: 2px;
  border-radius: var(--rl-radius-5);
}

/* On any dark surface, swap the focus ring to a light colour. */
.rl-surface-dark :focus-visible,
.rl-card--dark :focus-visible,
[data-rl-surface="dark"] :focus-visible {
  outline-color: var(--rl-color-focus-ring-on-dark);
}

button {
  font-family: inherit;
  font-size: inherit;
  border: none;
  background: transparent;
  cursor: pointer;
  color: inherit;
}

button:disabled,
[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.5;
}

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

img {
  height: auto;
}

input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

::selection {
  background: var(--rl-color-accent);
  color: var(--rl-color-text-on-dark);
}

/* -----------------------------------------------------------------
   Skip link — first focusable element on every page
   ----------------------------------------------------------------- */

.rl-skip-link {
  position: absolute;
  top: var(--rl-space-3);
  left: var(--rl-space-3);
  z-index: 100;
  padding: var(--rl-space-3) var(--rl-space-5);
  background: var(--rl-color-surface-dark);
  color: var(--rl-color-text-on-dark);
  font-weight: var(--rl-fw-bold);
  font-size: var(--rl-fs-body-sm);
  border-radius: var(--rl-radius-5);
  text-decoration: none;
  transform: translateY(-200%);
  transition: transform var(--rl-duration-default) var(--rl-ease-standard);
}

.rl-skip-link:focus,
.rl-skip-link:focus-visible {
  transform: translateY(0);
  outline: 2px solid var(--rl-color-focus-ring-on-dark);
  outline-offset: 2px;
}

/* -----------------------------------------------------------------
   Body type helpers (used by Razor + md content)
   ----------------------------------------------------------------- */

.rl-text-secondary { color: var(--rl-color-text-secondary); font-size: var(--rl-fs-body-sm); line-height: var(--rl-lh-body); }
.rl-text-muted     { color: var(--rl-color-text-muted); font-size: var(--rl-fs-secondary); }
.rl-text-on-dark   { color: var(--rl-color-text-on-dark); }
.rl-text-small     { font-size: var(--rl-fs-caption); }

.rl-mono {
  font-family: var(--rl-font-mono);
  font-variant-numeric: tabular-nums;
}

/* All mono-label classes resolve to the AA-safe ink-500 (ASMP-013). */
.rl-mono-label,
.rl-mono-eyebrow {
  font-family: var(--rl-font-mono);
  font-size: var(--rl-fs-mono-label);
  font-weight: var(--rl-fw-semi);
  color: var(--rl-color-text-muted);
  letter-spacing: var(--rl-tracking-mono-eyebrow);
  text-transform: uppercase;
  line-height: var(--rl-lh-mono);
}

.rl-mono-label--sm {
  font-size: var(--rl-fs-mono-label-sm);
}

.rl-mono-eyebrow--inverted {
  color: var(--rl-color-accent-eyebrow);
}

.rl-mono-numeric {
  font-family: var(--rl-font-mono);
  font-size: var(--rl-fs-mono-numeric);
  font-weight: var(--rl-fw-medium);
  font-variant-numeric: tabular-nums;
  color: var(--rl-color-text-primary);
}

.rl-mono-numeric--muted {
  color: var(--rl-color-text-muted);
}

/* -----------------------------------------------------------------
   Semantic body classes
   ----------------------------------------------------------------- */

.rl-prose {
  font-size: var(--rl-fs-body);
  line-height: var(--rl-lh-body);
  color: var(--rl-color-text-primary);
  max-width: 68ch;
}

.rl-prose--secondary {
  color: var(--rl-color-text-secondary);
}

.rl-prose--pretty {
  text-wrap: pretty;
}

/* Headings inside prose should preserve weight without line-clamp halos. */
.rl-prose h2 { font-size: var(--rl-fs-h2-section); margin: var(--rl-space-7) 0 var(--rl-space-3); }
.rl-prose h3 { font-size: var(--rl-fs-h3-card);    margin: var(--rl-space-6) 0 var(--rl-space-3); }
.rl-prose p  { margin: 0 0 var(--rl-space-5); }

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

@media print {
  body { background: var(--rl-white); color: #000; }
  .rl-nav, .rl-nav-dropdown, .rl-search-filters, .rl-footer, .rl-toolbar {
    display: none !important;
  }
  .rl-page, .rl-card, .rl-card--dark { padding: 0; box-shadow: none; }
  .rl-card--dark { background: var(--rl-white); color: #000; }
  .rl-card--dark .rl-mono-eyebrow,
  .rl-card--dark .rl-card__body { color: #000; }
}

/* -----------------------------------------------------------------
   Reduced motion
   ----------------------------------------------------------------- */

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