@import url('/assets/fonts/fonts.css');
@import url('/assets/css/tokens.css');

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

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

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
  background-color: var(--c-ledger-white);
  color: var(--c-ink);
  font-family: var(--font-text);
  overflow-x: hidden;
}

a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

a:hover {
  color: var(--c-alert-crimson);
  text-decoration-thickness: 2px;
}

img, picture {
  max-width: 100%;
  display: block;
  height: auto;
}

input, button, textarea, select {
  font: inherit;
}

/* Typography Classes */
.font-display { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em; }
.font-text { font-family: var(--font-text); }
.text-balance { text-wrap: balance; }
.text-pretty { text-wrap: pretty; }

/* Scale */
.text-xs { font-size: var(--fs-xs); }
.text-sm { font-size: var(--fs-sm); }
.text-base { font-size: var(--fs-base); }
.text-lg { font-size: var(--fs-lg); }
.text-xl { font-size: var(--fs-xl); }
.text-2xl { font-size: var(--fs-2xl); line-height: 1.1; }
.text-3xl { font-size: var(--fs-3xl); line-height: 1.1; }
.text-4xl { font-size: var(--fs-4xl); line-height: 1.1; }
.text-5xl { font-size: var(--fs-5xl); line-height: 1; }
.text-6xl { font-size: var(--fs-6xl); line-height: 1; }

.font-light { font-weight: 300; }
.font-normal { font-weight: 400; }
.font-bold { font-weight: 700; }

.uppercase { text-transform: uppercase; letter-spacing: 0.05em; }

/* Colors */
.bg-ledger { background-color: var(--c-ledger-white); }
.bg-oxford { background-color: var(--c-oxford-blue); color: var(--c-paper); }
.bg-crimson { background-color: var(--c-alert-crimson); color: var(--c-paper); }
.bg-paper { background-color: var(--c-paper); }
.bg-surface { background-color: var(--c-surface); }
.bg-ink { background-color: var(--c-ink); color: var(--c-ledger-white); }

.text-crimson { color: var(--c-alert-crimson); }
.text-oxford { color: var(--c-oxford-blue); }
.text-slate { color: var(--c-slate-grey); }

/* Layout & Grid */
.container {
  width: 100%;
  max-width: var(--max-w-site);
  margin-inline: auto;
  padding-inline: var(--sp-4);
}
@media (min-width: 768px) {
  .container { padding-inline: var(--sp-8); }
}
@media (min-width: 1024px) {
  .container { padding-inline: var(--sp-12); }
}

.grid { display: grid; }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.gap-4 { gap: var(--sp-4); }
.gap-8 { gap: var(--sp-8); }
.gap-12 { gap: var(--sp-12); }

.grid-cols-1 { grid-template-columns: 1fr; }

/* Asymmetrical Grid Motifs */
@media (min-width: 768px) {
  .grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-cols-12 { grid-template-columns: repeat(12, 1fr); }

  .col-span-8 { grid-column: span 8; }
  .col-span-4 { grid-column: span 4; }
  .col-span-9 { grid-column: span 9; }
  .col-span-3 { grid-column: span 3; }
  .col-start-2 { grid-column-start: 2; }
  .col-start-3 { grid-column-start: 3; }
}

/* Spacing Helpers */
.py-4 { padding-block: var(--sp-4); }
.py-8 { padding-block: var(--sp-8); }
.py-16 { padding-block: var(--sp-16); }
.py-24 { padding-block: var(--sp-24); }

.px-4 { padding-inline: var(--sp-4); }
.px-8 { padding-inline: var(--sp-8); }

.mt-4 { margin-top: var(--sp-4); }
.mt-8 { margin-top: var(--sp-8); }
.mt-12 { margin-top: var(--sp-12); }
.mb-4 { margin-bottom: var(--sp-4); }
.mb-8 { margin-bottom: var(--sp-8); }
.mb-12 { margin-bottom: var(--sp-12); }

.max-w-prose { max-width: var(--max-w-prose); }
.mx-auto { margin-inline: auto; }

/* Borders & Dividers */
.border-b { border-bottom: var(--border-thin); }
.border-t { border-top: var(--border-thin); }
.border-l { border-left: var(--border-thin); }
.border-r { border-right: var(--border-thin); }
.border-thick-b { border-bottom: var(--border-thick); }
.border-thick-t { border-top: var(--border-thick); }

/* Components */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-3) var(--sp-6);
  font-family: var(--font-text);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background-color: var(--c-ink);
  color: var(--c-ledger-white);
  border: none;
  text-decoration: none;
  cursor: pointer;
  transition: var(--trans-fast);
}
.btn:hover {
  background-color: var(--c-alert-crimson);
  color: var(--c-paper);
  text-decoration: none;
}
.btn-outline {
  background-color: transparent;
  color: var(--c-ink);
  border: var(--border-thin);
}
.btn-outline:hover {
  background-color: var(--c-ink);
  color: var(--c-ledger-white);
}

.card {
  border: var(--border-thin);
  padding: var(--sp-6);
  background-color: var(--c-paper);
}

.table-wrapper {
  width: 100%;
  overflow-x: auto;
}
table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}
th, td {
  padding: var(--sp-3);
  border-bottom: var(--border-thin);
}
th {
  font-weight: 700;
  background-color: var(--c-surface);
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Nav */
.nav-link {
  text-decoration: none;
  font-weight: 700;
  text-transform: uppercase;
  font-size: var(--fs-sm);
  padding-bottom: 2px;
}
.nav-link:hover {
  text-decoration: none;
  border-bottom: 2px solid var(--c-alert-crimson);
  color: var(--c-alert-crimson);
}
.nav-link.active {
  border-bottom: 2px solid var(--c-ink);
}

/* Tools */
.tool-container {
  background-color: var(--c-oxford-blue);
  color: var(--c-ledger-white);
  padding: var(--sp-8);
  border: 4px solid var(--c-alert-crimson);
}
.tool-input {
  width: 100%;
  padding: var(--sp-3);
  margin-top: var(--sp-2);
  margin-bottom: var(--sp-4);
  background-color: var(--c-paper);
  border: 1px solid var(--c-slate-grey);
  color: var(--c-ink);
}
.tool-result {
  margin-top: var(--sp-6);
  padding: var(--sp-6);
  background-color: var(--c-ledger-white);
  color: var(--c-ink);
  border-left: 8px solid var(--c-alert-crimson);
}

/* Editorial Article Layout */
.article-header {
  border-bottom: var(--border-thick);
  margin-bottom: var(--sp-12);
  padding-bottom: var(--sp-8);
}
.article-meta {
  display: flex;
  gap: var(--sp-6);
  font-size: var(--fs-sm);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--c-slate-grey);
  border-top: var(--border-thin);
  border-bottom: var(--border-thin);
  padding-block: var(--sp-2);
  margin-block: var(--sp-6);
}
.article-body p {
  margin-bottom: var(--sp-6);
  font-size: var(--fs-lg);
}
.article-body h2 {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  margin-top: var(--sp-12);
  margin-bottom: var(--sp-6);
}
.article-body h3 {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  margin-top: var(--sp-8);
  margin-bottom: var(--sp-4);
}
.article-body ul, .article-body ol {
  margin-bottom: var(--sp-6);
  padding-left: var(--sp-6);
  font-size: var(--fs-lg);
}
.article-body li {
  margin-bottom: var(--sp-2);
}
.article-body blockquote {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-style: italic;
  border-left: 4px solid var(--c-alert-crimson);
  padding-left: var(--sp-6);
  margin-block: var(--sp-8);
}