/* ============================================================
   SKYLAB STUDIOS — Colors & Type
   The canonical color + typography foundation.
   Load this (plus the Google Fonts link below) on any surface.

   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link href="https://fonts.googleapis.com/css2?family=Young+Serif&family=DM+Serif+Display:ital@0;1&family=DM+Sans:wght@300;400;500&family=DM+Mono:wght@400;500&display=swap" rel="stylesheet">
   ============================================================ */

:root {
  /* ── PRIMARY PALETTE ── */
  --color-ink:          #1a1612;   /* Primary background — warm near-black */
  --color-ink-deep:     #0f0d0b;   /* Card surfaces, elevated panels */
  --color-gold:         #b8924a;   /* Brand accent — CTAs, headlines, logo */
  --color-gold-light:   #d4a96a;   /* Italic emphasis, hover states */
  --color-cream:        #f2ede6;   /* Primary text on dark; light print bg */

  /* ── SECONDARY PALETTE ── */
  --color-forest:       #1e2d22;   /* Section breaks, card surfaces, lounge */
  --color-rust:         #8b3a2a;   /* Rarest accent — one element per piece */
  --color-muted:        #6b6259;   /* Secondary text, captions, fine print */

  /* ── BORDERS / OVERLAYS ── */
  --color-border:        rgba(184, 146, 74, 0.25);
  --color-border-strong: rgba(184, 146, 74, 0.45);
  --color-overlay-dark:  rgba(26, 22, 18, 0.85);

  /* ── SEMANTIC COLOR ALIASES ── */
  --bg1:  var(--color-ink);          /* page base */
  --bg2:  var(--color-ink-deep);     /* elevated surface */
  --bg3:  var(--color-forest);       /* accent surface / section break */
  --fg1:  var(--color-cream);        /* primary text */
  --fg2:  rgba(242, 237, 230, 0.65); /* body / secondary text */
  --fg3:  rgba(242, 237, 230, 0.40); /* tertiary text, disabled */
  --accent:        var(--color-gold);
  --accent-soft:   var(--color-gold-light);
  --accent-rare:   var(--color-rust);

  /* ── FONT FAMILIES ── */
  --font-serif: 'Young Serif', Georgia, 'Times New Roman', serif;
  --font-accent: 'DM Serif Display', Georgia, serif;
  --font-sans:  'DM Sans', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:  'DM Mono', 'Courier New', monospace;

  /* ── FONT WEIGHTS ── */
  --fw-light:   300; /* @kind font */
  --fw-regular: 400; /* @kind font */
  --fw-medium:  500; /* @kind font */
  --fw-bold:    700; /* @kind font */

  /* ── TYPE SCALE — display (serif) ── */
  --text-display-xl: clamp(3rem, 7vw, 6.5rem);
  --text-display-lg: clamp(2.4rem, 5vw, 4.5rem);
  --text-display-md: clamp(2rem, 4vw, 3.4rem);
  --text-display-sm: clamp(1.6rem, 3vw, 2.2rem);

  /* ── TYPE SCALE — body (sans) ── */
  --text-body-lg: 1.05rem;
  --text-body-md: 1rem;
  --text-body-sm: 0.92rem;
  --text-body-xs: 0.82rem;

  /* ── TYPE SCALE — label (mono) ── */
  --text-label:   0.75rem;
  --text-eyebrow: 0.72rem;
  --text-micro:   0.65rem;

  /* ── TRACKING ── */
  --tracking-tight:  0.02em;
  --tracking-normal: 0.04em;
  --tracking-wide:   0.1em;
  --tracking-wider:  0.14em;
  --tracking-widest: 0.2em;

  /* ── LEADING ── */
  --leading-tight:   1.1;
  --leading-snug:    1.3;
  --leading-normal:  1.7;
  --leading-relaxed: 1.85;
}

/* ============================================================
   SEMANTIC TYPE STYLES
   Apply these classes directly, or copy the rules into components.
   ============================================================ */

/* Mono eyebrow — sits ABOVE a headline */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-eyebrow);
  font-weight: var(--fw-regular);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--accent);
  opacity: 0.8;
}

/* Serif display headlines. Use <em> for italic gold emphasis words. */
.h1 {
  font-family: var(--font-serif);
  font-weight: var(--fw-regular);
  font-size: var(--text-display-xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg1);
}
.h2 {
  font-family: var(--font-serif);
  font-weight: var(--fw-regular);
  font-size: var(--text-display-lg);
  line-height: var(--leading-tight);
  color: var(--fg1);
}
.h3 {
  font-family: var(--font-serif);
  font-weight: var(--fw-regular);
  font-size: var(--text-display-md);
  line-height: var(--leading-snug);
  color: var(--fg1);
}
.h4 {
  font-family: var(--font-serif);
  font-weight: var(--fw-regular);
  font-size: var(--text-display-sm);
  line-height: var(--leading-snug);
  color: var(--fg1);
}
.h1 em, .h2 em, .h3 em, .h4 em {
  font-style: italic;
  color: var(--accent-soft);
}

/* Body copy — light weight sans, cream at 65% */
.p {
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  font-size: var(--text-body-md);
  line-height: var(--leading-normal);
  color: var(--fg2);
}
.p-lg { font-size: var(--text-body-lg); line-height: var(--leading-relaxed); }
.p-sm { font-size: var(--text-body-sm); }

/* UI label — medium sans */
.label {
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: var(--text-body-xs);
  letter-spacing: var(--tracking-normal);
  color: var(--fg1);
}

/* Mono detail — prices, timestamps, location lines */
.mono {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  font-weight: var(--fw-regular);
  letter-spacing: var(--tracking-normal);
  color: var(--accent);
}

/* Price display — mono, gold, slightly larger */
.price {
  font-family: var(--font-mono);
  font-size: 1.1rem;
  letter-spacing: var(--tracking-normal);
  color: var(--accent);
}