/* ─────────────────────────────────────────────────────────────
   RJ Digital — Design tokens (colors + typography)
   Warm editorial agency aesthetic. Cream page, burnt-amber accent.
   ───────────────────────────────────────────────────────────── */

/* Brand fonts — self-hosted variable files */
@font-face {
  font-family: 'Fraunces';
  src: url('fonts/Fraunces-Variable.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Fraunces';
  src: url('fonts/Fraunces-Italic-Variable.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('fonts/Inter-Variable.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('fonts/Inter-Italic-Variable.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
/* JetBrains Mono remains via Google Fonts (not part of brand upload) */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ── CORE BRAND COLORS ────────────────────────────────────── */
  --rj-cream:         #F2EDE8;  /* page background — never pure white */
  --rj-cream-deep:    #E8E0D8;  /* subtle dividers, hover wash */
  --rj-ink:           #1A1A1A;  /* primary text, dark sections */
  --rj-amber:         #D4622B;  /* burnt amber — the one accent */
  --rj-amber-hover:   #B84A1C;  /* darker amber for hover states */
  --rj-stone:         #7A7268;  /* warm secondary text */
  --rj-prose:         #4F4942;  /* long-form body copy */
  --rj-tan:           #E8D5C0;  /* form borders, warm tan edges */
  --rj-form-bg:       #FAF8F5;  /* form input backgrounds */

  /* ── EXTENDED STONE SCALE (from tailwind config) ──────────── */
  --rj-stone-50:  #F2EDE8;
  --rj-stone-100: #E8E0D8;
  --rj-stone-200: #D4C9BC;
  --rj-stone-300: #B8A48E;
  --rj-stone-400: #9C8060;
  --rj-stone-500: #806136;
  --rj-stone-600: #6B4E28;
  --rj-stone-700: #563E20;
  --rj-stone-800: #412F18;
  --rj-stone-900: #1A1A1A;

  /* ── SEMANTIC COLOR TOKENS ────────────────────────────────── */
  --fg-1: var(--rj-ink);          /* primary text */
  --fg-2: var(--rj-stone);        /* secondary / muted text */
  --fg-3: #A8A098;                /* tertiary / metadata */
  --fg-prose: var(--rj-prose);    /* long-form blog body */
  --fg-inverse: #FFFFFF;          /* text on dark sections */
  --fg-inverse-muted: rgba(255,255,255,0.5);
  --fg-accent: var(--rj-amber);
  --fg-accent-hover: var(--rj-amber-hover);

  --bg-page: var(--rj-cream);
  --bg-surface: #FFFFFF;           /* cards, elevated surfaces on cream */
  --bg-dark: var(--rj-ink);        /* alternating dark sections */
  --bg-form: var(--rj-form-bg);
  --bg-tint: rgba(212, 98, 43, 0.08);   /* amber 8% — pill badge bg */

  --border-subtle: rgba(26, 26, 26, 0.08);
  --border-default: #E8E0D8;
  --border-form: var(--rj-tan);
  --border-dark: rgba(255, 255, 255, 0.08);

  /* ── TYPOGRAPHY FAMILIES ──────────────────────────────────── */
  --font-serif: 'Fraunces', ui-serif, Georgia, 'Times New Roman', serif;
  --font-sans:  'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:  'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Fraunces is variable — these unlock optical size + weight tuning */
  --opsz-display: 144;   /* huge hero / counter numerals */
  --opsz-headline: 72;   /* H1 / H2 */
  --opsz-subhead: 48;    /* H3 / pullquotes */
  --opsz-caption: 9;     /* small italic captions */

  /* ── TYPE SCALE ───────────────────────────────────────────── */
  --fs-hero:     clamp(3rem, 2rem + 4vw, 6rem);       /* 48 → 96 */
  --fs-h1:       clamp(2.75rem, 2rem + 2.5vw, 4.5rem);/* 44 → 72 */
  --fs-h2:       clamp(2.25rem, 1.75rem + 2vw, 3.5rem);
  --fs-h3:       clamp(1.5rem, 1.25rem + 0.75vw, 2rem);
  --fs-h4:       1.5rem;
  --fs-lead:     1.25rem;        /* hero subtitle */
  --fs-body-lg:  1.125rem;
  --fs-body:     1rem;
  --fs-body-sm:  0.9375rem;
  --fs-caption:  0.8125rem;
  --fs-eyebrow:  0.6875rem;      /* 11px — uppercase tracked eyebrow labels */
  --fs-micro:    0.625rem;

  /* ── LETTER-SPACING ───────────────────────────────────────── */
  --tracking-tight:   -0.03em;   /* display headings */
  --tracking-snug:    -0.02em;   /* secondary headings */
  --tracking-normal:  0;
  --tracking-wide:    0.15em;    /* micro caption uppercase */
  --tracking-eyebrow: 0.2em;     /* eyebrow labels */
  --tracking-xwide:   0.3em;     /* footer micro labels */

  /* ── LINE HEIGHTS ─────────────────────────────────────────── */
  --lh-tight:   0.95;   /* hero display */
  --lh-display: 1.08;   /* h1/h2 */
  --lh-snug:    1.2;
  --lh-body:    1.6;
  --lh-prose:   1.8;    /* long-form blog body */

  /* ── SPACING (8pt base with editorial rhythm) ─────────────── */
  --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: 128px;
  --space-11: 176px;     /* section vertical rhythm */

  /* Max content widths */
  --max-content: 1200px;
  --max-wide:    1400px;
  --max-prose:   680px;

  /* ── RADII ────────────────────────────────────────────────── */
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-2xl: 32px;
  --radius-pill: 9999px;     /* all CTAs & nav buttons */

  /* ── SHADOWS (subtle only — never heavy) ─────────────────── */
  --shadow-line:  0 1px 0 rgba(0,0,0,0.04);
  --shadow-sm:    0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:    0 4px 12px rgba(0,0,0,0.06);
  --shadow-lg:    0 10px 30px rgba(0,0,0,0.08);
  --shadow-amber: 0 8px 24px rgba(212, 98, 43, 0.2);

  /* ── MOTION ───────────────────────────────────────────────── */
  --ease-editorial: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 200ms;
  --dur-mid:  500ms;
  --dur-slow: 800ms;
}

/* ──────────────────────────────────────────────────────────────
   Base element styles — apply tokens to common tags
   ────────────────────────────────────────────────────────────── */

html { font-family: var(--font-sans); scroll-behavior: smooth; }

body {
  background: var(--bg-page);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'kern' 1, 'liga' 1;
}

/* Display / hero */
.rj-hero-display {
  font-family: var(--font-serif);
  font-size: var(--fs-hero);
  font-weight: 400;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  font-variation-settings: 'opsz' 72;
  color: var(--fg-1);
}

/* Headings */
h1, .rj-h1 {
  font-family: var(--font-serif);
  font-size: var(--fs-h1);
  font-weight: 400;
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-tight);
  font-variation-settings: 'opsz' 72;
  color: var(--fg-1);
}

h2, .rj-h2 {
  font-family: var(--font-serif);
  font-size: var(--fs-h2);
  font-weight: 400;
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-snug);
  font-variation-settings: 'opsz' 72;
  color: var(--fg-1);
}

h3, .rj-h3 {
  font-family: var(--font-serif);
  font-size: var(--fs-h3);
  font-weight: 400;
  line-height: var(--lh-snug);
  font-variation-settings: 'opsz' 48;
  color: var(--fg-1);
}

h4, .rj-h4 {
  font-family: var(--font-sans);
  font-size: var(--fs-h4);
  font-weight: 600;
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

/* Body */
p, .rj-body { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--fg-2); }
.rj-lead    { font-size: var(--fs-lead); line-height: 1.5; color: var(--fg-2); font-weight: 300; }
.rj-prose   { font-size: 1.08rem; line-height: var(--lh-prose); color: var(--fg-prose); }

/* Eyebrow label — uppercase amber, tracked. Sits above H2. */
.rj-eyebrow {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-accent);
}

/* Small caption */
.rj-caption {
  font-family: var(--font-sans);
  font-size: var(--fs-caption);
  color: var(--fg-2);
  letter-spacing: 0.01em;
}

/* Monospace / technical metadata */
code, .rj-mono {
  font-family: var(--font-mono);
  font-size: 0.875em;
  font-feature-settings: 'calt' 0;
}

/* Italic accent inside headings (the signature move) */
.rj-italic-accent {
  font-style: italic;
  color: var(--fg-accent);
  font-variation-settings: 'opsz' 72;
}

/* Pullquote — amber left-rule, Fraunces italic */
.rj-pullquote {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.375rem;
  line-height: 1.5;
  color: var(--fg-1);
  border-left: 3px solid var(--fg-accent);
  padding-left: 1rem;
  margin: 2rem 0;
}

/* Stat numbers — Fraunces 600, amber, tabular */
.rj-stat {
  font-family: var(--font-serif);
  font-weight: 600;
  font-variation-settings: 'opsz' 144;
  color: var(--fg-accent);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

/* Links */
a { color: inherit; text-decoration: none; }
a.rj-link {
  color: var(--fg-accent);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
  transition: color var(--dur-fast) var(--ease-editorial);
}
a.rj-link:hover { color: var(--fg-accent-hover); }