/* ============================================================
   Robert Tibbs · Master design tokens
   Source of truth: Master Brand Document v2.0
   Imported by every page in the site. Do not duplicate inline.
   ------------------------------------------------------------
   Three layers:
     1. Master brand. Author chrome, home, about, footer
     2. Federal Capture sub-brand. Practitioner wing (cyan/yellow/teal accents)
     3. Dead Signal sub-brand. Fiction wing (book-product trilogy escalation)
   Sub-brand accents NEVER appear on master-brand surfaces.
   ============================================================ */

/* ---------- Webfonts (self-hosted under /assets/fonts) ---------- */
@font-face {
  font-family: "Playfair Display";
  src: url("../assets/fonts/PlayfairDisplay-Variable.ttf") format("truetype-variations");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Playfair Display";
  src: url("../assets/fonts/PlayfairDisplay-Italic-Variable.ttf") format("truetype-variations");
  font-weight: 400 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/Inter-Variable.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/Inter-Italic-Variable.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Marcellus";
  src: url("../assets/fonts/Marcellus-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("../assets/fonts/SpaceGrotesk-Variable.ttf") format("truetype-variations");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Lato";
  src: url("../assets/fonts/Lato-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Lato";
  src: url("../assets/fonts/Lato-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Lato";
  src: url("../assets/fonts/Lato-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../assets/fonts/JetBrainsMono-Variable.ttf") format("truetype-variations");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}
/* Dead Signal title face. Bebas Neue served from Google Fonts on dead-signal.html only. */

:root {
  /* ============================================================
     COLOR TOKENS
     ============================================================ */

  /* ---- Master brand (5-color core) ---- */
  --color-navy:        #0F1A2E;
  --color-navy-alt:    #142850;
  --color-coral:       #E84A5F;
  --color-coral-alt:   #E74C5C;
  --color-coral-hover: #C73B4E;
  --color-gold:        #D4A574;
  --color-gold-alt:    #C49960;
  --color-surface:     #F7F8FA;
  --color-surface-alt: #FAFAFA;
  --color-text-dark:   #1A1A1F;
  --color-text-dark-2: #222226;
  --color-text-light:  #E8E8EA;
  --color-text-light-2:#FFFFFF;
  --color-text-mute:   #6B7280;
  --color-rule:        #D1D5DB;

  /* ---- Federal Capture sub-brand accents (FC surfaces ONLY) ---- */
  --fc-cyan:           #0E7C92;
  --fc-cyan-bright:    #2BB8D6;
  --fc-yellow:         #E8C547;
  --fc-teal:           #1B5566;
  --fc-theater-bg:     #F3F4F6;
  --fc-theater-text:   #6B7280;

  /* ---- Capture Compass direction tokens (fixed assignments) ---- */
  --compass-north: var(--fc-cyan);
  --compass-south: var(--color-gold);
  --compass-east:  var(--color-coral);
  --compass-west:  var(--color-navy);

  /* ---- Federal Capture content pillar tokens ---- */
  --pillar-1: var(--color-coral); /* Pipeline Theater Critique  25% */
  --pillar-2: var(--fc-cyan);     /* Capture Operating System    25% */
  --pillar-3: var(--color-gold);  /* Five Rebuilds               15% */
  --pillar-4: var(--color-navy);  /* Small Business Reality      25% */
  --pillar-5: var(--fc-teal);     /* Practitioner Diary          10% */

  /* ---- Dead Signal trilogy escalation (book products ONLY) ---- */
  --ds-static-bg:     #1A2D52;
  --ds-static-deep:   #0A1530;
  --ds-resonance-bg:  #C46A1F;
  --ds-resonance-deep:#7A3D10;
  --ds-silence-bg:    #8B1A2B;
  --ds-silence-deep:  #4A0A15;

  /* ============================================================
     SEMANTIC SURFACES
     ============================================================ */
  --bg-page:        var(--color-surface);
  --bg-page-dark:   var(--color-navy);
  --bg-card:        #FFFFFF;
  --bg-card-dark:   var(--color-navy);
  --fg-default:     var(--color-text-dark);
  --fg-muted:       var(--color-text-mute);
  --fg-on-dark:     var(--color-text-light);
  --border-default: var(--color-rule);
  --border-focus:   var(--color-coral);

  /* ============================================================
     TYPOGRAPHY FAMILIES
     ============================================================ */
  --font-serif:    "Playfair Display", "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-serif-classic: "Marcellus", "Playfair Display", Georgia, serif;
  --font-sans:     "Inter", "Karla", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-sans-alt: "Lato", "Inter", system-ui, sans-serif;
  --font-display-industrial: "Bebas Neue", "Anton", "Space Grotesk", "Inter", sans-serif;
  --font-mono:     "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ============================================================
     TYPE SCALE (master brand)
     ============================================================ */
  --fs-display:    clamp(3rem, 6vw, 5.5rem);
  --fs-h1:         clamp(2.25rem, 4vw, 3.5rem);
  --fs-h2:         clamp(1.75rem, 3vw, 2.5rem);
  --fs-h3:         1.5rem;
  --fs-h4:         1.25rem;
  --fs-body:       1.0625rem;
  --fs-body-sm:    0.9375rem;
  --fs-caption:    0.8125rem;
  --fs-label:      0.75rem;

  --lh-tight:      1.1;
  --lh-snug:       1.25;
  --lh-body:       1.6;
  --lh-body-fc:    1.5;

  --tracking-label: 0.15em;
  --tracking-tight: -0.01em;

  /* ============================================================
     SPACING (8pt grid)
     ============================================================ */
  --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: 160px;

  --reading-width: 70ch;
  --container-narrow: 720px;
  --container-content: 960px;
  --container-wide: 1200px;
  --container-full: 1440px;

  /* ============================================================
     RADII
     ============================================================ */
  --radius-none: 0;
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   10px;
  --radius-pill: 999px;

  /* ============================================================
     SHADOWS
     ============================================================ */
  --shadow-1: 0 1px 0 rgba(15, 26, 46, 0.04);
  --shadow-2: 0 1px 2px rgba(15, 26, 46, 0.06), 0 1px 1px rgba(15, 26, 46, 0.03);
  --shadow-3: 0 4px 12px rgba(15, 26, 46, 0.08), 0 1px 2px rgba(15, 26, 46, 0.04);
  --shadow-card: 0 2px 6px rgba(15, 26, 46, 0.05);
  --shadow-card-hover: 0 8px 22px rgba(15, 26, 46, 0.10);

  /* ============================================================
     MOTION
     ============================================================ */
  --ease-out:     cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out:  cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:     120ms;
  --dur-base:     200ms;
  --dur-slow:     360ms;
}

/* ============================================================
   SEMANTIC ELEMENT STYLES
   ============================================================ */

.rt-page {
  background: var(--bg-page);
  color: var(--fg-default);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

.rt-page--dark {
  background: var(--bg-page-dark);
  color: var(--fg-on-dark);
}

.rt-h1, .rt-h2, .rt-h3, .rt-display {
  font-family: var(--font-serif);
  font-weight: 600;
  color: var(--color-navy);
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-tight);
  text-wrap: balance;
  margin: 0;
}
.rt-page--dark .rt-h1,
.rt-page--dark .rt-h2,
.rt-page--dark .rt-h3,
.rt-page--dark .rt-display { color: var(--color-text-light-2); }

.rt-display { font-size: var(--fs-display); font-weight: 500; }
.rt-h1      { font-size: var(--fs-h1); font-weight: 600; }
.rt-h2      { font-size: var(--fs-h2); font-weight: 500; line-height: var(--lh-snug); }
.rt-h3      { font-size: var(--fs-h3); font-weight: 600; }
.rt-h4      { font-size: var(--fs-h4); font-weight: 600; font-family: var(--font-sans); color: var(--color-navy); letter-spacing: 0; }

.rt-p {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-default);
  max-width: var(--reading-width);
  text-wrap: pretty;
  margin: 0 0 1em;
}

.rt-label {
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--color-navy);
}
.rt-page--dark .rt-label,
.rt-label--on-dark { color: var(--color-text-light); }

.rt-italic {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--color-navy);
}

.rt-tagline {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.375rem;
  line-height: 1.4;
  color: var(--color-navy);
  border-left: 3px solid var(--color-coral);
  padding: 0.5rem 0 0.5rem 1.25rem;
  margin: 1rem 0;
  max-width: 60ch;
}

.rt-code {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  background: var(--color-surface);
  padding: 0.15em 0.4em;
  border-radius: var(--radius-xs);
  color: var(--color-text-dark);
}

.rt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: 0.01em;
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-sm);
  border: 1.5px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.rt-btn--primary {
  background: var(--color-coral);
  color: #fff;
}
.rt-btn--primary:hover { background: var(--color-coral-hover); }
.rt-btn--primary:disabled { opacity: 0.5; cursor: not-allowed; }
.rt-btn--secondary {
  background: transparent;
  color: var(--color-coral);
  border-color: var(--color-coral);
}
.rt-btn--secondary:hover { background: var(--color-coral); color: #fff; }
.rt-btn--ghost {
  background: transparent;
  color: var(--color-coral);
  padding-inline: 0;
}
.rt-btn--ghost:hover { color: var(--color-coral-hover); text-decoration: underline; text-underline-offset: 4px; }

.rt-input {
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  color: var(--color-navy);
  background: #fff;
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-sm);
  padding: 0.75rem 0.875rem;
  width: 100%;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.rt-input::placeholder { color: var(--color-text-mute); }
.rt-input:focus {
  outline: none;
  border-color: var(--color-coral);
  box-shadow: 0 0 0 3px rgba(232, 74, 95, 0.15);
}

.rt-card {
  background: var(--bg-card);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  transition: border-color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out);
}
.rt-card:hover {
  box-shadow: var(--shadow-card-hover);
}

::selection {
  background: var(--color-coral);
  color: #fff;
}

/* ============================================================
   BASE RESET
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg-page);
  color: var(--fg-default);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; }