/**
 * Fenovera Design System — Base Styles
 * Version: 1.3.0 · Phase 2
 *
 * Imports: must be loaded after tokens.css.
 * Covers: CSS reset, root typography, base element styles,
 *         container helpers, grid utilities.
 */

/* ── Self-hosted fonts ──────────────────────────────────────────────────
   Run `node scripts/download-fonts.js` once to populate /fonts/.
   ──────────────────────────────────────────────────────────────────── */

/* Inter */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/inter-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/inter-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/inter-600.woff2') format('woff2');
}

/* Manrope */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/manrope-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/manrope-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/fonts/manrope-800.woff2') format('woff2');
}


/* ═══════════════════════════════════════════════════════════════════════
   RESET
═══════════════════════════════════════════════════════════════════════ */

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

html {
  font-size: 16px;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  background-color: var(--color-canvas);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

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

img { object-fit: cover; }

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

button { cursor: pointer; border: none; background: none; }

a {
  color: inherit;
  text-decoration: none;
}

ul, ol { list-style: none; }

table {
  border-collapse: collapse;
  width: 100%;
}

[hidden] { display: none !important; }


/* ═══════════════════════════════════════════════════════════════════════
   FOCUS STYLES  (global — components may tighten scope)
═══════════════════════════════════════════════════════════════════════ */

:focus-visible {
  outline: var(--focus-ring-width) var(--focus-ring-style) var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
  border-radius: var(--radius-xs);
}

/* Remove default focus ring; only show on keyboard navigation */
:focus:not(:focus-visible) {
  outline: none;
}


/* ═══════════════════════════════════════════════════════════════════════
   TYPOGRAPHY — HEADINGS
   Headings use Manrope; weights vary by level.
═══════════════════════════════════════════════════════════════════════ */

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-snug);
  color: var(--color-ink);
}

h1, .h1 {
  font-size: var(--text-5xl);
  font-weight: var(--weight-extrabold);
  letter-spacing: var(--tracking-tight);
}

h2, .h2 {
  font-size: var(--text-4xl);
  font-weight: var(--weight-bold);
}

h3, .h3 {
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
}

h4, .h4 {
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
}

h5, .h5 {
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
}

h6, .h6 {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
}

/* Responsive heading scale */
@media (max-width: 767px) {
  h1, .h1 { font-size: var(--text-4xl); }
  h2, .h2 { font-size: var(--text-3xl); }
  h3, .h3 { font-size: var(--text-2xl); }
  h4, .h4 { font-size: var(--text-xl); }
}


/* ═══════════════════════════════════════════════════════════════════════
   TYPOGRAPHY — BODY + SEMANTIC CLASSES
═══════════════════════════════════════════════════════════════════════ */

p {
  line-height: var(--leading-relaxed);
  max-width: 72ch; /* prevent overly long lines */
}

p + p { margin-top: var(--space-4); }

.text-lead {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--color-ink-secondary);
}

.text-overline {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-bronze);
}

.text-caption {
  font-size: var(--text-xs);
  color: var(--color-ink-secondary); /* 4.53:1 on canvas — WCAG AA all sizes */
  line-height: var(--leading-normal);
}

.text-label {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-ink-secondary);
}

.text-meta {
  font-size: var(--text-xs);
  color: var(--color-ink-secondary); /* 4.53:1 on canvas — WCAG AA all sizes */
}

strong, b { font-weight: var(--weight-semibold); }
em, i     { font-style: italic; }

small { font-size: var(--text-sm); }

code, pre {
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.9em;
  background: var(--color-surface-secondary);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
}

code { padding: 0.1em 0.35em; }

pre {
  padding: var(--space-4);
  overflow-x: auto;
  white-space: pre-wrap;
}

hr {
  border: none;
  border-top: 1px solid var(--color-border-subtle);
  margin: var(--space-8) 0;
}


/* ═══════════════════════════════════════════════════════════════════════
   TYPOGRAPHY — COLOR VARIANTS
═══════════════════════════════════════════════════════════════════════ */

.text-navy    { color: var(--color-navy); }
.text-bronze  { color: var(--color-bronze); }
.text-ink     { color: var(--color-ink); }
.text-muted   { color: var(--color-ink-secondary); }
/* DECORATIVE-ONLY: .text-subtle may only be used for chrome, icons, dividers, or
   metadata that carries zero informational value (e.g. visual separators, ornamental
   labels). It MUST NOT be used for text that communicates status, identity, or action.
   Governance check 20 enforces this constraint in components.css.
   Contrast: --color-ink-tertiary (#8D9BA3) = 2.58:1 on canvas — WCAG AA fail. */
.text-subtle  { color: var(--color-ink-tertiary); } /* decorative-only: see above */
.text-inverse { color: var(--color-ink-inverse); }
.text-error   { color: var(--color-error); }
.text-success { color: var(--color-success); }


/* ═══════════════════════════════════════════════════════════════════════
   CONTAINERS
═══════════════════════════════════════════════════════════════════════ */

.container {
  width: 100%;
  max-width: var(--container-xl);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container-sm  { max-width: var(--container-sm); }
.container-md  { max-width: var(--container-md); }
.container-lg  { max-width: var(--container-lg); }
.container-xl  { max-width: var(--container-xl); }
.container-2xl { max-width: var(--container-2xl); }

@media (min-width: 768px) {
  .container { padding-inline: var(--gutter-md); }
}

@media (min-width: 1024px) {
  .container { padding-inline: var(--gutter-lg); }
}


/* ═══════════════════════════════════════════════════════════════════════
   GRID UTILITIES
═══════════════════════════════════════════════════════════════════════ */

.grid {
  display: grid;
  gap: var(--grid-gap);
}

.grid-2  { grid-template-columns: repeat(2, 1fr); }
.grid-3  { grid-template-columns: repeat(3, 1fr); }
.grid-4  { grid-template-columns: repeat(4, 1fr); }
.grid-12 { grid-template-columns: repeat(12, 1fr); }

@media (max-width: 1023px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

@media (min-width: 1024px) {
  .grid { gap: var(--grid-gap-lg); }
}

/* Span helpers for 12-col grid */
.col-span-1  { grid-column: span 1; }
.col-span-2  { grid-column: span 2; }
.col-span-3  { grid-column: span 3; }
.col-span-4  { grid-column: span 4; }
.col-span-5  { grid-column: span 5; }
.col-span-6  { grid-column: span 6; }
.col-span-7  { grid-column: span 7; }
.col-span-8  { grid-column: span 8; }
.col-span-9  { grid-column: span 9; }
.col-span-10 { grid-column: span 10; }
.col-span-11 { grid-column: span 11; }
.col-span-12 { grid-column: span 12; }


/* ═══════════════════════════════════════════════════════════════════════
   FLEX UTILITIES
═══════════════════════════════════════════════════════════════════════ */

.flex         { display: flex; }
.flex-col     { flex-direction: column; }
.flex-wrap    { flex-wrap: wrap; }
.items-start  { align-items: flex-start; }
.items-center { align-items: center; }
.items-end    { align-items: flex-end; }
.justify-start  { justify-content: flex-start; }
.justify-center { justify-content: center; }
.justify-end    { justify-content: flex-end; }
.justify-between{ justify-content: space-between; }
.gap-1  { gap: var(--space-1); }
.gap-2  { gap: var(--space-2); }
.gap-3  { gap: var(--space-3); }
.gap-4  { gap: var(--space-4); }
.gap-6  { gap: var(--space-6); }
.gap-8  { gap: var(--space-8); }


/* ═══════════════════════════════════════════════════════════════════════
   SPACING UTILITIES
═══════════════════════════════════════════════════════════════════════ */

.mt-0  { margin-top: 0; }
.mt-2  { margin-top: var(--space-2); }
.mt-4  { margin-top: var(--space-4); }
.mt-6  { margin-top: var(--space-6); }
.mt-8  { margin-top: var(--space-8); }
.mt-12 { margin-top: var(--space-12); }
.mt-16 { margin-top: var(--space-16); }

.mb-0  { margin-bottom: 0; }
.mb-2  { margin-bottom: var(--space-2); }
.mb-4  { margin-bottom: var(--space-4); }
.mb-6  { margin-bottom: var(--space-6); }
.mb-8  { margin-bottom: var(--space-8); }
.mb-12 { margin-bottom: var(--space-12); }
.mb-16 { margin-bottom: var(--space-16); }


/* ═══════════════════════════════════════════════════════════════════════
   VISIBILITY UTILITIES
═══════════════════════════════════════════════════════════════════════ */

.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;
}

.hide-sm { }
.show-sm { display: none; }

@media (max-width: 767px) {
  .hide-sm { display: none !important; }
  .show-sm { display: block; }
}

.hide-md { }
.show-md { display: none; }

@media (min-width: 768px) {
  .hide-md { display: none !important; }
  .show-md { display: block; }
}


/* ═══════════════════════════════════════════════════════════════════════
   SECTION SPACING
═══════════════════════════════════════════════════════════════════════ */

.section {
  padding-block: var(--space-16);
}

.section-sm {
  padding-block: var(--space-12);
}

.section-lg {
  padding-block: var(--space-24);
}

@media (max-width: 767px) {
  .section    { padding-block: var(--space-12); }
  .section-sm { padding-block: var(--space-8); }
  .section-lg { padding-block: var(--space-16); }
}


/* ═══════════════════════════════════════════════════════════════════════
   DIVIDERS
═══════════════════════════════════════════════════════════════════════ */

.divider {
  width: 100%;
  height: 1px;
  background-color: var(--color-border-subtle);
}

.divider-strong {
  background-color: var(--color-border);
}


/* ═══════════════════════════════════════════════════════════════════════
   BACKGROUND VARIANTS
═══════════════════════════════════════════════════════════════════════ */

.bg-canvas  { background-color: var(--color-canvas); }
.bg-surface { background-color: var(--color-surface); }
.bg-navy    { background-color: var(--color-navy); color: var(--color-ink-inverse); }
.bg-navy-subtle { background-color: var(--color-navy-subtle); }
.bg-bronze-subtle { background-color: var(--color-bronze-subtle); }