/* ═══════════════════════════════════════════════════════════════════
   CricBun Base Styles — Reset, Typography, Elements
   ═══════════════════════════════════════════════════════════════════ */

/* ── Box Sizing ── */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* ── Reset ── */
html {
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--cb-font-sans);
  font-size: var(--cb-text-base);
  line-height: var(--cb-leading-normal);
  color: var(--cb-text);
  background-color: var(--cb-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Typography ── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--cb-font-sans);
  font-weight: var(--cb-weight-bold);
  line-height: var(--cb-leading-tight);
  color: var(--cb-text);
  margin: 0 0 var(--cb-space-sm) 0;
}

h1 { font-size: var(--cb-text-3xl); font-weight: var(--cb-weight-extrabold); }
h2 { font-size: var(--cb-text-2xl); font-weight: var(--cb-weight-bold); }
h3 { font-size: var(--cb-text-xl); font-weight: var(--cb-weight-semibold); }
h4 { font-size: var(--cb-text-lg); font-weight: var(--cb-weight-semibold); }
h5 { font-size: var(--cb-text-base); font-weight: var(--cb-weight-semibold); }
h6 { font-size: var(--cb-text-sm); font-weight: var(--cb-weight-semibold); }

p { margin: 0 0 var(--cb-space-base) 0; }

small { font-size: var(--cb-text-sm); }
strong, b { font-weight: var(--cb-weight-semibold); }

/* ── Links ── */
a {
  color: var(--cb-text-link);
  text-decoration: none;
  transition: color var(--cb-transition-fast);
}

a:hover {
  color: var(--cb-text-link-hover);
  text-decoration: underline;
}

a:focus-visible {
  outline: none;
  box-shadow: var(--cb-shadow-focus);
  border-radius: var(--cb-radius-sm);
}

/* ── Lists ── */
ul, ol {
  margin: 0 0 var(--cb-space-base) 0;
  padding: 0 0 0 1.5rem;
}

li { margin-bottom: var(--cb-space-2xs); }

/* ── Images ── */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

figure { margin: 0; }

/* ── Form Elements ── */
input, textarea, select, button {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

/* ── Focus ── */
:focus-visible {
  outline: none;
  box-shadow: var(--cb-shadow-focus);
}

/* ── Selection ── */
::selection {
  background: var(--cb-primary-light);
  color: var(--cb-primary-dark);
}

/* ── Horizontal Rule ── */
hr {
  border: none;
  border-top: 1px solid var(--cb-border-light);
  margin: var(--cb-space-lg) 0;
}

/* ── Blockquotes ── */
blockquote {
  border-left: 3px solid var(--cb-primary);
  padding: var(--cb-space-sm) var(--cb-space-base);
  margin: var(--cb-space-base) 0;
  background: var(--cb-bg-subtle);
  border-radius: 0 var(--cb-radius-md) var(--cb-radius-md) 0;
}

/* ── Code ── */
code {
  font-family: var(--cb-font-mono);
  font-size: var(--cb-text-sm);
  background: var(--cb-bg-subtle);
  padding: 0.125rem 0.375rem;
  border-radius: var(--cb-radius-sm);
}

pre {
  font-family: var(--cb-font-mono);
  font-size: var(--cb-text-sm);
  background: var(--cb-bg-inverse);
  color: var(--cb-text-inverse);
  padding: var(--cb-space-base);
  border-radius: var(--cb-radius-md);
  overflow-x: auto;
  line-height: var(--cb-leading-relaxed);
}

/* ── Skip Link ── */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--cb-space-base);
  z-index: var(--cb-z-toast);
  padding: var(--cb-space-sm) var(--cb-space-base);
  background: var(--cb-primary);
  color: white;
  border-radius: var(--cb-radius-sm);
  font-weight: var(--cb-weight-medium);
}

.skip-link:focus {
  top: var(--cb-space-sm);
}

/* ── Print ── */
@media print {
  body { font-size: 12pt; }
  a[href]::after { content: " (" attr(href) ")"; }
}