/* Room 64 — Colors & Type
   Drop in: <link rel="stylesheet" href="colors_and_type.css">
   Webfonts loaded from Google Fonts + Fontshare (General Sans).
*/

/* ----- Webfonts ----- */
@import url("https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,300;0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,400&family=JetBrains+Mono:wght@400;500&display=swap");
@import url("https://api.fontshare.com/v2/css?f[]=general-sans@300,400,500,600,700&display=swap");

:root {
  /* ----- Color: ground ----- */
  --ink: #0E0B09;       /* dominant background */
  --char: #1A1512;      /* card / elevated surface */
  --smoke: #2A2320;     /* borders, dividers */

  /* ----- Color: foreground ----- */
  --cream: #EFE6D8;     /* primary fg */
  --bone: #C9BEA9;      /* secondary fg */
  --ash: #7A6E5E;       /* tertiary fg, disabled */

  /* ----- Color: accent ----- */
  --brass: #C8302A;     /* single accent — neon crimson, matches the room's red glow */
  --brass-glow: #E64A3E;/* hover */
  --oxblood: #5A1F1A;   /* deep secondary, used sparingly */

  /* ----- Color: utility ----- */
  --scrim: rgba(14, 11, 9, 0.85);
  --hairline: rgba(201, 190, 169, 0.08);
  --soft-fill: rgba(239, 230, 216, 0.06);

  /* ----- Semantic ----- */
  --bg: var(--ink);
  --bg-elev: var(--char);
  --fg: var(--cream);
  --fg-muted: var(--bone);
  --fg-faint: var(--ash);
  --border: var(--smoke);
  --accent: var(--brass);
  --accent-hover: var(--brass-glow);

  /* ----- Type families ----- */
  --font-display: "Newsreader", "Charter", "Iowan Old Style", Georgia, serif;
  --font-body: "General Sans", "Inter Tight", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", ui-monospace, monospace;

  /* ----- Type scale (fluid where helpful) ----- */
  --fs-eyebrow: 11px;     /* mono caps metadata */
  --fs-caption: 13px;
  --fs-body-sm: 14px;
  --fs-body: 16px;
  --fs-body-lg: 18px;
  --fs-h6: 18px;
  --fs-h5: 22px;
  --fs-h4: 28px;
  --fs-h3: clamp(32px, 3.4vw, 44px);
  --fs-h2: clamp(40px, 5vw, 64px);
  --fs-h1: clamp(56px, 8vw, 112px);

  /* ----- Tracking ----- */
  --track-eyebrow: 0.18em;
  --track-caps: 0.08em;
  --track-tight: -0.02em;
  --track-tighter: -0.035em;

  /* ----- Line height ----- */
  --lh-display: 1.02;
  --lh-h: 1.12;
  --lh-body: 1.6;

  /* ----- Spacing scale (4px base) ----- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 144px;

  /* ----- Radii ----- */
  --radius-image: 0;
  --radius-button: 2px;
  --radius-input: 2px;
  --radius-card: 4px;
  --radius-modal: 6px;
  --radius-pill: 999px;

  /* ----- Shadows ----- */
  --shadow-room: 0 24px 60px -20px rgba(0, 0, 0, 0.6),
                 0 8px 24px -12px rgba(0, 0, 0, 0.4);
  --shadow-candle: inset 0 0 120px rgba(182, 138, 62, 0.06);

  /* ----- Motion ----- */
  --ease-door: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-micro: 200ms;
  --dur-state: 400ms;
  --dur-reveal: 700ms;

  /* ----- Layout ----- */
  --content-max: 1280px;
  --bleed-max: 1440px;
}

/* ----- Base ----- */
html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ----- Semantic type roles ----- */
.r64-display, h1.r64, .r64-h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-h1);
  line-height: var(--lh-display);
  letter-spacing: var(--track-tighter);
  font-variation-settings: "opsz" 72;
  color: var(--fg);
}

h2.r64, .r64-h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-h2);
  line-height: var(--lh-h);
  letter-spacing: var(--track-tight);
  font-variation-settings: "opsz" 36;
  color: var(--fg);
}

h3.r64, .r64-h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-h3);
  line-height: var(--lh-h);
  letter-spacing: var(--track-tight);
  font-variation-settings: "opsz" 24;
  color: var(--fg);
}

h4.r64, .r64-h4 {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-h4);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--fg);
}

h5.r64, .r64-h5 {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-h5);
  line-height: 1.25;
  color: var(--fg);
}

h6.r64, .r64-h6 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-h6);
  line-height: 1.3;
  color: var(--fg);
}

p.r64, .r64-p {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg);
  text-wrap: pretty;
  max-width: 62ch;
}

.r64-lede {
  font-family: var(--font-body);
  font-size: var(--fs-body-lg);
  line-height: 1.55;
  color: var(--fg-muted);
  max-width: 56ch;
}

.r64-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--fg-muted);
}

.r64-caption {
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  color: var(--fg-muted);
  line-height: 1.45;
}

.r64-meta {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--fg-muted);
}

code, .r64-code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  color: var(--fg-muted);
}

a.r64, .r64-link {
  color: var(--fg);
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: color var(--dur-micro) var(--ease-door),
              background-size var(--dur-state) var(--ease-door);
}

a.r64:hover, .r64-link:hover {
  color: var(--accent-hover);
}

/* ----- Wordmark ----- */
.r64-wordmark {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 22px;
  letter-spacing: 0.02em;
  color: var(--fg);
  font-variation-settings: "opsz" 24;
}
.r64-wordmark .num {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--accent);
  font-feature-settings: "lnum" 1;
}