/* ═══════════════════════════════════════════════════════
   ZETTLD Typography Framework
   Shared across all pages. Single source of truth for
   font sizes, line heights, letter spacing, and
   responsive scaling across 5 breakpoints.

   Breakpoints:
     Mobile     < 480px
     Tablet     480 - 768px
     iPad       768 - 1024px
     Laptop     1024 - 1440px
     Monitor    1440+
   ═══════════════════════════════════════════════════════ */

:root {
  /* ── FONT FAMILIES ── */
  --font-display: 'Rubik Dirt', 'DM Serif Display', Georgia, serif;
  --font-serif: 'DM Serif Display', Georgia, serif;
  --font-sans: 'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif;

  /* ── TYPE SCALE ──
     Base: 1rem = 16px
     Scale ratio ~1.2 (minor third), tuned for readability.
     Each step has a mobile and desktop value.
     CSS clamp() handles the fluid transition.
  */

  /* Fine print / badge labels — 0.72rem minimum readable floor enforced */
  --text-2xs:   0.72rem;   /* 11.5px — match badges, phase labels (floor) */
  --text-xs:    0.76rem;   /* 12.2px — section labels, uppercase tags, nav tagline */
  --text-sm:    0.82rem;   /* 13.1px — metadata, footer links, stat labels */
  --text-base:  0.875rem;  /* 14px   — body text, card descriptions, nav links */
  --text-md:    1rem;      /* 16px  — primary body, form inputs, buttons */
  --text-lg:    1.125rem;  /* 18px  — card headings, panel titles */
  --text-xl:    1.25rem;   /* 20px  — section subtitles, readiness scores */
  --text-2xl:   1.5rem;    /* 24px  — page section titles */
  --text-3xl:   1.875rem;  /* 30px  — page headers */
  --text-4xl:   2.25rem;   /* 36px  — hero secondary */
  --text-5xl:   3rem;      /* 48px  — hero primary */

  /* ── FLUID HEADINGS ──
     Use clamp() for headings that scale between breakpoints.
     Format: clamp(mobile-min, fluid-vw, desktop-max)
  */
  --heading-hero:     clamp(2.2rem,  5vw,  4rem);      /* Homepage hero */
  --heading-page:     clamp(1.75rem, 4vw,  3rem);      /* Interior page heroes */
  --heading-section:  clamp(1.5rem,  3.5vw, 2.4rem);   /* Section titles */
  --heading-card:     clamp(1.25rem, 2.5vw, 1.75rem);  /* Card/panel headings */
  --heading-quiz:     clamp(1.3rem,  3vw,  1.8rem);    /* Quiz question text */

  /* ── LINE HEIGHTS ── */
  --lh-none:    1;       /* Display numbers, hero stats */
  --lh-tight:   1.15;    /* Large headings */
  --lh-snug:    1.3;     /* Medium headings, card titles */
  --lh-normal:  1.5;     /* Body text default */
  --lh-relaxed: 1.65;    /* Descriptions, longer body text */
  --lh-loose:   1.8;     /* Legal text, terms, privacy */

  /* ── LETTER SPACING ── */
  --ls-tight:   -0.02em; /* Large display headings */
  --ls-normal:  0;       /* Body text */
  --ls-wide:    0.05em;  /* ~0.8px — buttons, nav links */
  --ls-wider:   0.12em;  /* ~2px — uppercase labels */
  --ls-widest:  0.2em;   /* ~3px — section labels, badges */
  --ls-brand:   0.35em;  /* ~5-6px — logo text */

  /* ── FONT WEIGHTS ── */
  --fw-normal:  400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;
  --fw-extra:   800;

  /* ── MAX WIDTHS (readable line lengths) ── */
  --prose-sm:   45ch;    /* Narrow columns, card text */
  --prose-md:   60ch;    /* Standard body text */
  --prose-lg:   72ch;    /* Wide body text, legal */
}


/* ═══════════════════════════════════════════════════════
   RESPONSIVE OVERRIDES
   Scale the base variables at each breakpoint.
   Only override what changes — cascade does the rest.
   ═══════════════════════════════════════════════════════ */

/* ── MOBILE (< 480px) ── */
@media (max-width: 479px) {
  :root {
    --text-2xs:   0.72rem;
    --text-xs:    0.74rem;
    --text-sm:    0.76rem;
    --text-base:  0.8rem;
    --text-md:    0.875rem;
    --text-lg:    1rem;
    --text-xl:    1.1rem;
    --text-2xl:   1.25rem;
    --text-3xl:   1.5rem;
    --text-4xl:   1.75rem;
    --text-5xl:   2.2rem;
    --lh-normal:  1.55;
    --lh-relaxed: 1.7;
  }
}

/* ── TABLET (480px - 767px) ── */
@media (min-width: 480px) and (max-width: 767px) {
  :root {
    --text-2xs:   0.72rem;
    --text-xs:    0.75rem;
    --text-sm:    0.78rem;
    --text-base:  0.84rem;
    --text-md:    0.925rem;
    --text-lg:    1.05rem;
    --text-xl:    1.2rem;
    --text-2xl:   1.375rem;
    --text-3xl:   1.625rem;
    --text-4xl:   2rem;
    --text-5xl:   2.5rem;
  }
}

/* ── iPad (768px - 1023px) ── */
@media (min-width: 768px) and (max-width: 1023px) {
  :root {
    --text-2xs:   0.72rem;
    --text-xs:    0.76rem;
    --text-sm:    0.80rem;
    --text-base:  0.86rem;
    --text-md:    0.95rem;
    --text-lg:    1.1rem;
    --text-xl:    1.2rem;
    --text-2xl:   1.4rem;
    --text-3xl:   1.75rem;
    --text-4xl:   2.1rem;
    --text-5xl:   2.75rem;
  }
}

/* ── LAPTOP (1024px - 1439px) ──
   This is the default / design target.
   :root values above are tuned for this range.
   No overrides needed. */

/* ── LARGE MONITOR (1440px+) ── */
@media (min-width: 1440px) {
  :root {
    --text-2xs:   0.72rem;
    --text-xs:    0.78rem;
    --text-sm:    0.84rem;
    --text-base:  0.925rem;
    --text-md:    1.05rem;
    --text-lg:    1.2rem;
    --text-xl:    1.375rem;
    --text-2xl:   1.625rem;
    --text-3xl:   2rem;
    --text-4xl:   2.5rem;
    --text-5xl:   3.25rem;
    --lh-normal:  1.55;
    --lh-relaxed: 1.7;
  }
}

/* ── ULTRAWIDE (1920px+) ── */
@media (min-width: 1920px) {
  :root {
    --text-base:  0.95rem;
    --text-md:    1.1rem;
    --text-lg:    1.25rem;
    --text-xl:    1.5rem;
    --text-2xl:   1.75rem;
    --text-3xl:   2.125rem;
    --text-4xl:   2.75rem;
    --text-5xl:   3.5rem;
  }
}


/* ═══════════════════════════════════════════════════════
   UTILITY CLASSES
   Apply these to override or quickly set type styles.
   Optional — pages can also reference variables directly.
   ═══════════════════════════════════════════════════════ */

/* ── Size utilities ── */
.t-2xs  { font-size: var(--text-2xs) }
.t-xs   { font-size: var(--text-xs) }
.t-sm   { font-size: var(--text-sm) }
.t-base { font-size: var(--text-base) }
.t-md   { font-size: var(--text-md) }
.t-lg   { font-size: var(--text-lg) }
.t-xl   { font-size: var(--text-xl) }
.t-2xl  { font-size: var(--text-2xl) }
.t-3xl  { font-size: var(--text-3xl) }
.t-4xl  { font-size: var(--text-4xl) }
.t-5xl  { font-size: var(--text-5xl) }

/* ── Heading utilities ── */
.t-hero     { font-size: var(--heading-hero);    line-height: var(--lh-tight); letter-spacing: var(--ls-tight) }
.t-page     { font-size: var(--heading-page);    line-height: var(--lh-tight) }
.t-section  { font-size: var(--heading-section); line-height: var(--lh-snug) }
.t-card     { font-size: var(--heading-card);    line-height: var(--lh-snug) }

/* ── Family utilities ── */
.t-serif    { font-family: var(--font-serif) }
.t-sans     { font-family: var(--font-sans) }
.t-display  { font-family: var(--font-display) }

/* ── Weight utilities ── */
.t-normal   { font-weight: var(--fw-normal) }
.t-medium   { font-weight: var(--fw-medium) }
.t-semi     { font-weight: var(--fw-semi) }
.t-bold     { font-weight: var(--fw-bold) }
.t-extra    { font-weight: var(--fw-extra) }

/* ── Line height utilities ── */
.lh-none    { line-height: var(--lh-none) }
.lh-tight   { line-height: var(--lh-tight) }
.lh-snug    { line-height: var(--lh-snug) }
.lh-normal  { line-height: var(--lh-normal) }
.lh-relaxed { line-height: var(--lh-relaxed) }
.lh-loose   { line-height: var(--lh-loose) }

/* ── Letter spacing utilities ── */
.ls-tight   { letter-spacing: var(--ls-tight) }
.ls-normal  { letter-spacing: var(--ls-normal) }
.ls-wide    { letter-spacing: var(--ls-wide) }
.ls-wider   { letter-spacing: var(--ls-wider) }
.ls-widest  { letter-spacing: var(--ls-widest) }

/* ── Uppercase label pattern ──
   Common ZETTLD pattern: uppercase, wide spacing, small, bold */
.t-label {
  font-size: var(--text-xs);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  font-weight: var(--fw-bold);
}

/* ── Body prose (readable width) ── */
.t-prose {
  font-size: var(--text-base);
  line-height: var(--lh-relaxed);
  max-width: var(--prose-md);
}

.t-prose-sm {
  font-size: var(--text-base);
  line-height: var(--lh-relaxed);
  max-width: var(--prose-sm);
}


/* ═══════════════════════════════════════════════════════
   ACCESSIBILITY
   Global rules applied via shared stylesheet.
   ═══════════════════════════════════════════════════════ */

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Focus visible ── */
:focus-visible {
  outline: 2px solid #D4A853;
  outline-offset: 3px;
}
:focus:not(:focus-visible) {
  outline: none;
}

/* ── Touch targets ── */
a, button, input, select, textarea, [role="button"] {
  touch-action: manipulation;
}

/* ── Skip link ── */
.skip-link {
  position: absolute;
  top: -60px;
  left: 8px;
  padding: 10px 18px;
  background: #D4A853;
  color: #0B0F14;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 1px;
  text-decoration: none;
  border-radius: 0 0 8px 8px;
  z-index: 10001;
}
.skip-link:focus {
  top: 0;
}