/* ============================================================
   Rovexaro - Fonts & Typography Stylesheet
   ============================================================ */

/* Google Fonts are loaded via <link> tags in HTML head.
   This file handles font-face declarations and custom typography. */

/* ----- Font Stacks ----- */
:root {
  --rov-font-head: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --rov-font-body: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --rov-font-mono: 'SFMono-Regular', 'Consolas', 'Liberation Mono', monospace;
}

/* ----- Global Typography ----- */
.rov-t-xs { font-size: 0.75rem; }
.rov-t-sm { font-size: 0.875rem; }
.rov-t-base { font-size: 1rem; }
.rov-t-lg { font-size: 1.125rem; }
.rov-t-xl { font-size: 1.25rem; }
.rov-t-2xl { font-size: 1.5rem; }
.rov-t-3xl { font-size: 1.875rem; }
.rov-t-4xl { font-size: 2.25rem; }
.rov-t-5xl { font-size: 3rem; }

/* ----- Font Weights ----- */
.rov-fw-400 { font-weight: 400; }
.rov-fw-500 { font-weight: 500; }
.rov-fw-600 { font-weight: 600; }
.rov-fw-700 { font-weight: 700; }
.rov-fw-800 { font-weight: 800; }

/* ----- Line Heights ----- */
.rov-lh-tight { line-height: 1.2; }
.rov-lh-snug { line-height: 1.4; }
.rov-lh-normal { line-height: 1.6; }
.rov-lh-relaxed { line-height: 1.75; }
.rov-lh-loose { line-height: 2; }

/* ----- Letter Spacing ----- */
.rov-ls-tight { letter-spacing: -0.02em; }
.rov-ls-normal { letter-spacing: 0; }
.rov-ls-wide { letter-spacing: 0.05em; }
.rov-ls-wider { letter-spacing: 0.1em; }
.rov-ls-widest { letter-spacing: 0.15em; }

/* ----- Heading Styles ----- */
.rov-h1 {
  font-family: var(--rov-font-head);
  font-size: clamp(2.25rem, 5vw, 4rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.025em;
}

.rov-h2 {
  font-family: var(--rov-font-head);
  font-size: clamp(1.75rem, 3.5vw, 2.75rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.015em;
}

.rov-h3 {
  font-family: var(--rov-font-head);
  font-size: clamp(1.3rem, 2.5vw, 1.75rem);
  font-weight: 700;
  line-height: 1.3;
}

.rov-h4 {
  font-family: var(--rov-font-head);
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.4;
}

.rov-h5 {
  font-family: var(--rov-font-head);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5;
}

/* ----- Body Text Styles ----- */
.rov-body-lg {
  font-family: var(--rov-font-body);
  font-size: 1.125rem;
  line-height: 1.75;
  color: var(--rov-text-mid);
}

.rov-body-base {
  font-family: var(--rov-font-body);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--rov-text-dark);
}

.rov-body-sm {
  font-family: var(--rov-font-body);
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--rov-text-mid);
}

/* ----- Special Text ----- */
.rov-eyebrow {
  font-family: var(--rov-font-head);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rov-orange);
}

.rov-caption {
  font-family: var(--rov-font-body);
  font-size: 0.78rem;
  color: var(--rov-text-light);
  font-style: italic;
}

.rov-quote {
  font-family: var(--rov-font-body);
  font-size: 1.1rem;
  font-style: italic;
  color: var(--rov-text-mid);
  line-height: 1.75;
}

/* ----- Highlight Text ----- */
.rov-text-highlight {
  background: linear-gradient(to bottom, transparent 60%, rgba(224, 123, 57, 0.25) 60%);
}

/* ----- List Styles ----- */
.rov-list-check {
  list-style: none;
  padding: 0;
}

.rov-list-check li {
  padding-left: 28px;
  position: relative;
  margin-bottom: 8px;
  font-size: 0.93rem;
  color: var(--rov-text-mid);
}

.rov-list-check li::before {
  content: '\f00c';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  position: absolute;
  left: 0;
  top: 2px;
  color: var(--rov-orange);
  font-size: 0.75rem;
}

.rov-list-arrow {
  list-style: none;
  padding: 0;
}

.rov-list-arrow li {
  padding-left: 22px;
  position: relative;
  margin-bottom: 8px;
  font-size: 0.92rem;
}

.rov-list-arrow li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--rov-orange);
  font-weight: 700;
}

/* ----- Code & Pre ----- */
code {
  font-family: var(--rov-font-mono);
  font-size: 0.88em;
  background: var(--rov-beige-mid);
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--rov-orange-dark);
}

pre {
  font-family: var(--rov-font-mono);
  background: var(--rov-graphite);
  color: var(--rov-white);
  padding: 20px;
  border-radius: var(--rov-radius);
  overflow-x: auto;
  font-size: 0.88rem;
}

/* ----- Selection ----- */
::selection {
  background: rgba(224, 123, 57, 0.25);
  color: var(--rov-text-dark);
}