/* =========================================================================
   TFM — Tech Freedom Ministries — Foundations
   Light mode only. Built to last; not to trend.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');

/* =========================================================================
   EB Garamond — TFM brand serif. Replaces the Georgia stand-in.
   Self-hosted under fonts/. Georgia kept as a system fallback while loading.
   ========================================================================= */
@font-face { font-family: "EB Garamond"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/EBGaramond-Regular.ttf") format("truetype"); }
@font-face { font-family: "EB Garamond"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("fonts/EBGaramond-Italic.ttf") format("truetype"); }
@font-face { font-family: "EB Garamond"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("fonts/EBGaramond-Medium.ttf") format("truetype"); }
@font-face { font-family: "EB Garamond"; font-style: italic; font-weight: 500; font-display: swap;
  src: url("fonts/EBGaramond-MediumItalic.ttf") format("truetype"); }
@font-face { font-family: "EB Garamond"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("fonts/EBGaramond-SemiBold.ttf") format("truetype"); }
@font-face { font-family: "EB Garamond"; font-style: italic; font-weight: 600; font-display: swap;
  src: url("fonts/EBGaramond-SemiBoldItalic.ttf") format("truetype"); }
@font-face { font-family: "EB Garamond"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("fonts/EBGaramond-Bold.ttf") format("truetype"); }
@font-face { font-family: "EB Garamond"; font-style: italic; font-weight: 700; font-display: swap;
  src: url("fonts/EBGaramond-BoldItalic.ttf") format("truetype"); }
@font-face { font-family: "EB Garamond"; font-style: normal; font-weight: 800; font-display: swap;
  src: url("fonts/EBGaramond-ExtraBold.ttf") format("truetype"); }
@font-face { font-family: "EB Garamond"; font-style: italic; font-weight: 800; font-display: swap;
  src: url("fonts/EBGaramond-ExtraBoldItalic.ttf") format("truetype"); }

:root {
  /* -------- BASE COLORS -------- */
  --tfm-parchment:        #F4F0E6;   /* Background */
  --tfm-parchment-2:      #ECE6D6;   /* Slightly deeper parchment for cards */
  --tfm-parchment-edge:   #D9D0B8;   /* Hairline borders on parchment */
  --tfm-near-black:       #1C1209;   /* Primary text, logo on light */
  --tfm-warm-brown:       #4A3F2F;   /* Secondary text, body copy */
  --tfm-warm-brown-soft:  #6E5F4A;   /* Tertiary / meta text */

  --tfm-deep-gold:        #8B6914;   /* Headline italic accent */
  --tfm-bright-gold:      #C4A84A;   /* Rules, diamonds, brackets */
  --tfm-muted-gold:       #8B7355;   /* Eyebrow + nav caps */

  /* -------- LEVEL SYSTEM (locked, never altered) -------- */
  --tfm-l1-bg:            #1D4D2A;   /* The Exodus — deep green */
  --tfm-l1-fg:            #A8D4B2;
  --tfm-l2-bg:            #5C4500;   /* The Catechism — deep amber */
  --tfm-l2-fg:            #F0C85A;
  --tfm-l3-bg:            #5C1A1A;   /* The Homestead — deep red */
  --tfm-l3-fg:            #F0A8A8;
  --tfm-l4-bg:            #2C2C1A;   /* The Great Commission — deep olive */
  --tfm-l4-fg:            #C8C890;

  /* -------- SEMANTIC -------- */
  --tfm-bg:               var(--tfm-parchment);
  --tfm-fg:               var(--tfm-near-black);
  --tfm-fg-muted:         var(--tfm-warm-brown);
  --tfm-fg-faint:         var(--tfm-warm-brown-soft);
  --tfm-rule:             var(--tfm-bright-gold);
  --tfm-accent:           var(--tfm-deep-gold);
  --tfm-eyebrow:          var(--tfm-muted-gold);
  --tfm-divider:          var(--tfm-bright-gold);

  /* -------- TYPE FAMILIES -------- */
  --tfm-serif:    "EB Garamond", Georgia, 'Iowan Old Style', 'Apple Garamond', 'Times New Roman', serif;
  --tfm-sans:     'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --tfm-mono:     ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* -------- TYPE TOKENS -------- */
  --tfm-eyebrow-size:     11px;
  --tfm-eyebrow-track:    0.20em;
  --tfm-body-size:        15px;
  --tfm-body-line:        1.65;
  --tfm-body-track:       0.01em;

  /* Headline scale — Georgia, two-tone */
  --tfm-h1:               clamp(38px, 4.6vw, 56px);
  --tfm-h2:               clamp(30px, 3.4vw, 42px);
  --tfm-h3:               clamp(22px, 2.4vw, 28px);
  --tfm-h4:               19px;

  /* -------- SPACING (4px base) -------- */
  --tfm-s-1: 4px;
  --tfm-s-2: 8px;
  --tfm-s-3: 12px;
  --tfm-s-4: 16px;
  --tfm-s-5: 24px;
  --tfm-s-6: 32px;
  --tfm-s-7: 48px;
  --tfm-s-8: 64px;
  --tfm-s-9: 96px;

  /* -------- RADII -------- */
  /* TFM is document-like. Radii are restrained or zero. */
  --tfm-radius-0: 0;
  --tfm-radius-1: 2px;
  --tfm-radius-2: 4px;
  --tfm-radius-pill: 999px;

  /* -------- SHADOWS / ELEVATION -------- */
  /* TFM avoids glassy / floating UI. Shadows simulate paper on a desk. */
  --tfm-shadow-paper:  0 1px 0 rgba(28,18,9,0.04), 0 1px 2px rgba(28,18,9,0.06);
  --tfm-shadow-card:   0 2px 1px rgba(28,18,9,0.04), 0 8px 24px -12px rgba(28,18,9,0.18);
  --tfm-shadow-deep:   0 24px 60px -28px rgba(28,18,9,0.32);

  /* -------- MOTION -------- */
  /* No bounce. Documents do not spring. */
  --tfm-ease:           cubic-bezier(.2,.0,.2,1);
  --tfm-ease-in:        cubic-bezier(.4,.0,1,1);
  --tfm-dur-fast:       120ms;
  --tfm-dur:            220ms;
  --tfm-dur-slow:       420ms;
}

/* =========================================================================
   ELEMENT DEFAULTS
   ========================================================================= */

html, body {
  background: var(--tfm-bg);
  color: var(--tfm-fg);
  font-family: var(--tfm-sans);
  font-size: var(--tfm-body-size);
  line-height: var(--tfm-body-line);
  letter-spacing: var(--tfm-body-track);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Headlines — Georgia, two-tone "Proclamation" pattern */
.tfm-h1, .tfm-h2, .tfm-h3, .tfm-h4,
h1, h2, h3, h4 {
  font-family: var(--tfm-serif);
  font-weight: 700;
  color: var(--tfm-near-black);
  letter-spacing: -0.005em;
  line-height: 1.1;
  text-wrap: pretty;
  margin: 0;
}
.tfm-h1, h1 { font-size: var(--tfm-h1); }
.tfm-h2, h2 { font-size: var(--tfm-h2); }
.tfm-h3, h3 { font-size: var(--tfm-h3); line-height: 1.2; }
.tfm-h4, h4 { font-size: var(--tfm-h4); line-height: 1.3; }

/* Italic gold payoff phrase — used after the strong word(s) in a Proclamation headline */
.tfm-italic,
.tfm-h1 em, .tfm-h2 em, .tfm-h3 em, .tfm-h4 em,
h1 em, h2 em, h3 em, h4 em {
  font-style: italic;
  font-weight: 400;
  color: var(--tfm-deep-gold);
}

/* Eyebrow — wide-spaced caps, sans, muted gold */
.tfm-eyebrow {
  font-family: var(--tfm-sans);
  font-size: var(--tfm-eyebrow-size);
  font-weight: 400;
  letter-spacing: var(--tfm-eyebrow-track);
  text-transform: uppercase;
  color: var(--tfm-muted-gold);
}

/* Body */
.tfm-body, p {
  font-family: var(--tfm-sans);
  font-size: var(--tfm-body-size);
  line-height: var(--tfm-body-line);
  letter-spacing: var(--tfm-body-track);
  color: var(--tfm-warm-brown);
  margin: 0;
  text-wrap: pretty;
}
.tfm-lead {
  font-family: var(--tfm-serif);
  font-style: italic;
  color: var(--tfm-warm-brown);
  font-size: 19px;
  line-height: 1.55;
}
.tfm-meta {
  color: var(--tfm-warm-brown-soft);
  font-size: 13px;
}

/* Inline */
strong, b { color: var(--tfm-near-black); font-weight: 600; }
em, i     { font-style: italic; }

a {
  color: var(--tfm-deep-gold);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in oklab, var(--tfm-deep-gold) 35%, transparent);
  transition: color var(--tfm-dur) var(--tfm-ease),
              border-color var(--tfm-dur) var(--tfm-ease);
}
a:hover {
  color: var(--tfm-near-black);
  border-bottom-color: var(--tfm-near-black);
}

code, kbd, samp, pre {
  font-family: var(--tfm-mono);
  font-size: 0.92em;
  color: var(--tfm-near-black);
  background: color-mix(in oklab, var(--tfm-bright-gold) 14%, transparent);
  padding: 1px 5px;
  border-radius: var(--tfm-radius-1);
}
pre { padding: 14px 16px; line-height: 1.55; overflow: auto; }

hr.tfm-rule {
  border: 0;
  border-top: 1px solid var(--tfm-bright-gold);
  width: 40px;
  margin: 0;
}
hr.tfm-rule-full {
  border: 0;
  border-top: 1px solid var(--tfm-bright-gold);
  margin: 0;
}

/* The Diamond ◆ */
.tfm-diamond {
  color: var(--tfm-bright-gold);
  font-size: 10px;
  line-height: 1;
  display: inline-block;
  transform: translateY(-1px);
}
.tfm-diamond::before { content: "◆"; }

/* Corner brackets — reserved for credential-adjacent documents */
.tfm-brackets {
  position: relative;
}
.tfm-brackets::before,
.tfm-brackets::after,
.tfm-brackets > .tfm-bracket-bl,
.tfm-brackets > .tfm-bracket-br {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  border: 1px solid var(--tfm-bright-gold);
}
.tfm-brackets::before { top: 10px; left: 10px;  border-right: 0; border-bottom: 0; }
.tfm-brackets::after  { top: 10px; right: 10px; border-left: 0;  border-bottom: 0; }
.tfm-brackets > .tfm-bracket-bl { bottom: 10px; left: 10px;  border-right: 0; border-top: 0; }
.tfm-brackets > .tfm-bracket-br { bottom: 10px; right: 10px; border-left: 0;  border-top: 0; }

/* Selection */
::selection {
  background: color-mix(in oklab, var(--tfm-bright-gold) 55%, transparent);
  color: var(--tfm-near-black);
}