/*
 * ╔══════════════════════════════════════════════════╗
 * ║  villaGo — Typography                           ║
 * ║  All type-related global styles.                ║
 * ╚══════════════════════════════════════════════════╝
 */

/* ── Font Import ─────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;500;600;700;800&display=swap');

/* ── Body Base Font ──────────────────────────────── */
body {
  font-family: 'Cairo', sans-serif;
  font-size: 1rem;
  font-weight: var(--y-weight-regular);
  line-height: 1.7;
  color: var(--y-color-text);
}

/* ── Headings ────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Cairo', sans-serif;
  font-weight: var(--y-weight-bold);
  line-height: 1.3;
  color: var(--y-color-text);
}

h1 { font-size: var(--y-font-xxl);  margin-block-end: var(--y-space-m); }
h2 { font-size: 2rem;               margin-block-end: var(--y-space-s); }
h3 { font-size: var(--y-font-xl);   margin-block-end: var(--y-space-s); }
h4 { font-size: var(--y-font-l);    margin-block-end: var(--y-space-xs); }
h5 { font-size: 1rem;               margin-block-end: var(--y-space-xs); }
h6 { font-size: var(--y-font-m);    margin-block-end: var(--y-space-xs); }

/* ── Paragraph ───────────────────────────────────── */
p {
  line-height: 1.9;
  color: var(--y-color-text);
}

p + p {
  margin-block-start: var(--y-space-s);
}

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

a:hover {
  color: var(--y-color-primary);
}

/* ── Inline elements ─────────────────────────────── */
strong, b {
  font-weight: var(--y-weight-bold);
}

em, i {
  font-style: italic;
}

small {
  font-size: var(--y-font-xs);
}

mark {
  background: var(--y-color-accent-subtle);
  color: var(--y-color-text);
  padding: 0 4px;
  border-radius: 2px;
}

code {
  font-family: monospace;
  background: var(--y-color-secondary);
  padding: 2px 6px;
  border-radius: var(--y-radius-s);
  font-size: var(--y-font-s);
}

pre {
  font-family: monospace;
  background: var(--y-color-secondary);
  padding: var(--y-space-m);
  border-radius: var(--y-radius-m);
  overflow-x: auto;
}

/* ── Selection ───────────────────────────────────── */
::selection {
  background: var(--y-color-primary-subtle);
  color: var(--y-color-primary);
}

/* ── Text utility classes ────────────────────────── */
.text-primary   { color: var(--y-color-primary); }
.text-accent    { color: var(--y-color-accent); }
.text-muted     { color: var(--y-color-text-muted); }
.text-white     { color: white; }
.text-red       { color: var(--y-color-danger); }
.text-green     { color: var(--y-color-success); }
.text-center    { text-align: center; }
.text-right     { text-align: right; }
.text-left      { text-align: left; }
.fw-600         { font-weight: var(--y-weight-semibold); }
.fw-700         { font-weight: var(--y-weight-bold); }

/* ═══════════════════════════════════════════════════
   RESPONSIVE STYLES
   ═══════════════════════════════════════════════════ */

/* ── Large Desktop (lg) ──────────────────────────── */
@media (max-width: 1200px) {
  h1 { font-size: 1.7rem; }
  h2 { font-size: 1.8rem; }
}

/* ── Tablet (md) ─────────────────────────────────── */
@media (max-width: 992px) {
  h1 { font-size: 1.6rem; }
  h2 { font-size: 1.6rem; }
  h3 { font-size: 1.2rem; }
}

/* ── Mobile Landscape / Large Phone (sm) ─────────── */
@media (max-width: 768px) {
  body   { font-size: 0.93rem; line-height: 1.8; }
  h1     { font-size: 1.5rem; }
  h2     { font-size: 1.4rem; }
  h3     { font-size: 1.1rem; }
  h4     { font-size: 1rem; }
}

/* ── Small Phone (xs) ────────────────────────────── */
@media (max-width: 480px) {
  h1     { font-size: 1.35rem; }
  h2     { font-size: 1.25rem; }
  h3     { font-size: 1rem; }
  body   { font-size: 0.9rem; line-height: 1.9; }
}