/* ═══════════════════════════════════════════════════════════════════
   NRI OUTPOST — REDESIGN  ·  "Field Guide" token system
   One shared source: color · type (rem) · spacing · radius · shadow · motion
   Light + dark via [data-dark]; Senior Mode scales via root font-size.
   Page content is REM-based so OS/browser font-size + Senior Mode are honored.
   Fonts (Bunny Fonts — GDPR-safe) are loaded via <link> in the HTML head.
   ═══════════════════════════════════════════════════════════════════ */

/* ============================ TOKENS ============================ */
:root {
  /* Warm-paper neutrals */
  --paper:     #f4ede0;
  --paper-2:   #ece3d2;
  --surface:   #fcf8ef;
  --surface-2: #f7f0e2;
  --card:      var(--surface);   /* aliases — shared chat-widget.css uses --card/--card-2 */
  --card-2:    var(--surface-2);
  --ink:       #211a12;
  --ink-2:     #574b3a;
  --ink-3:     #897c68;
  --rule:      #dacfb8;
  --rule-2:    #c8bb9f;

  /* Accents — shared chroma, varied hue (warm-leaning) */
  --saffron:      #bf5526;   /* primary — CTAs, brand, eyebrows */
  --saffron-soft: #e2a074;
  --saffron-wash: #f6e6d6;
  --indigo:       #2c3768;   /* official / trust / tools (replaces teal) */
  --indigo-soft:  #6470a0;
  --indigo-wash:  #e3e2ee;
  --forest:       #3c6448;   /* positive / verified */
  --forest-wash:  #e2ebe1;
  --brick:        #97361f;   /* urgent / warning */
  --brick-wash:   #f3ddd5;
  --gold:         #ae7e36;   /* highlight / affiliate accent */

  --on-accent:    #fdf6ec;   /* text on saffron/indigo fills */

  /* Type families */
  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --sans:  "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  --mono:  "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Type scale (rem → scales with root font-size / Senior Mode) */
  --t-xs:   0.72rem;
  --t-sm:   0.82rem;
  --t-base: 1rem;
  --t-lg:   1.16rem;
  --t-xl:   1.42rem;
  --t-2xl:  1.85rem;
  --t-3xl:  clamp(1.9rem, 1.4rem + 2.2vw, 2.7rem);
  --t-4xl:  clamp(2.4rem, 1.6rem + 3.6vw, 3.9rem);
  --t-5xl:  clamp(2.9rem, 1.7rem + 5.4vw, 5.2rem);

  /* Spacing scale (rem) */
  --s-1: 0.25rem; --s-2: 0.5rem;  --s-3: 0.75rem; --s-4: 1rem;
  --s-5: 1.5rem;  --s-6: 2rem;    --s-7: 3rem;    --s-8: 4rem;
  --s-9: 6rem;

  /* Radius */
  --r-xs: 5px; --r-sm: 9px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px;
  --r-pill: 999px;

  /* Shadow (warm-tinted) */
  --sh-1: 0 1px 2px rgba(60,42,20,.06), 0 1px 1px rgba(60,42,20,.04);
  --sh-2: 0 4px 14px rgba(60,42,20,.08), 0 1px 3px rgba(60,42,20,.05);
  --sh-3: 0 18px 48px rgba(40,28,12,.16), 0 4px 12px rgba(40,28,12,.08);

  /* Motion */
  --ease: cubic-bezier(.22,.61,.36,1);
  --dur: .22s;

  --maxw: 1180px;
}

[data-dark="true"] {
  --paper:     #15110b;
  --paper-2:   #1d1810;
  --surface:   #1e1810;
  --surface-2: #251e15;
  --ink:       #f4ede0;
  --ink-2:     #c6b9a2;
  --ink-3:     #8c8069;
  --rule:      #38301f;
  --rule-2:    #4a4030;

  --saffron:      #d8703f;
  --saffron-soft: #e2a074;
  --saffron-wash: #2e2114;
  --indigo:       #9aa3cf;
  --indigo-soft:  #6470a0;
  --indigo-wash:  #1c2030;
  --forest:       #7aa888;
  --forest-wash:  #18221a;
  --brick:        #d6795e;
  --brick-wash:   #2c1812;
  --gold:         #cb9c54;
  --on-accent:    #1a130c;
  --sh-3: 0 18px 48px rgba(0,0,0,.5), 0 4px 12px rgba(0,0,0,.3);
}

/* ============================ BASE ============================ */
.fg-root, .fg-root * { box-sizing: border-box; }
.fg-root {
  font-family: var(--sans);
  background: var(--paper);
  color: var(--ink);
  font-size: var(--t-base);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.fg-root h1, .fg-root h2, .fg-root h3, .fg-root h4, .fg-root p { margin: 0; }
.fg-root a:not(.btn) { color: inherit; } /* buttons keep their .btn--* variant color even as <a> */

.serif { font-family: var(--serif); font-weight: 600; line-height: 1.14; letter-spacing: -.01em; }
.serif em, .accent-em { font-style: italic; color: var(--saffron); font-weight: 600; }
.mono { font-family: var(--mono); }

.display {
  font-family: var(--serif); font-weight: 700;
  font-size: var(--t-5xl); line-height: 1.06; letter-spacing: -.018em;
}
.h-title { font-family: var(--serif); font-weight: 700; font-size: var(--t-4xl); line-height: 1.08; letter-spacing: -.015em; }
.h-sec   { font-family: var(--serif); font-weight: 700; font-size: var(--t-3xl); line-height: 1.1; letter-spacing: -.012em; }
.h-card  { font-family: var(--serif); font-weight: 700; font-size: var(--t-xl); line-height: 1.18; }

/* ---- Eyebrow / section label ---- */
.eyebrow {
  font-family: var(--mono);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--saffron);
  display: inline-flex; align-items: center; gap: .55em;
}
.eyebrow.is-tool { color: var(--indigo); }
.eyebrow.is-muted { color: var(--ink-3); }
.eyebrow::before {
  content: ""; width: 1.6em; height: 1px; background: currentColor; opacity: .55;
}
.eyebrow.no-rule::before { display: none; }

.lead { font-size: var(--t-lg); color: var(--ink-2); line-height: 1.55; }
.muted { color: var(--ink-3); }

/* ============================ LAYOUT ============================ */
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--s-6); }
.section { padding: var(--s-9) 0; }
.sec-head { margin-bottom: var(--s-7); }
.sec-head .h-sec { margin-top: var(--s-3); max-width: 22ch; }

/* ============================ SEAL / BRAND MARK ============================ */
.seal {
  position: relative; flex: none;
  width: 2.6em; height: 2.6em; border-radius: var(--r-sm);
  background: var(--saffron); color: var(--on-accent);
  display: grid; place-items: center;
  box-shadow: inset 0 0 0 1px rgba(253,246,236,.32), inset 0 0 0 4px var(--saffron), inset 0 0 0 5px rgba(253,246,236,.32);
}
.seal svg { width: 56%; height: 56%; }
.seal.is-indigo { background: var(--indigo); }
.brandlock { display: inline-flex; align-items: center; gap: .6em; text-decoration: none; color: inherit; }
.brandlock .wordmark { font-family: var(--serif); font-weight: 700; font-size: 1.32em; letter-spacing: -.01em; line-height: 1; }
.brandlock .wordmark em { font-style: italic; color: var(--saffron); }
.brandlock .kicker { font-family: var(--mono); font-size: .56em; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-3); display:block; margin-top: .35em; }

/* ============================ BUTTONS ============================ */
.btn {
  font-family: var(--sans); font-weight: 600; font-size: var(--t-sm);
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  padding: .7em 1.25em; border-radius: var(--r-pill);
  border: 1px solid transparent; cursor: pointer;
  text-decoration: none; line-height: 1; white-space: nowrap;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn svg { width: 1.15em; height: 1.15em; }
.btn--primary { background: var(--saffron); color: var(--on-accent); }
.btn--primary:hover { background: var(--ink); color: var(--paper); }
.btn--ink { background: var(--ink); color: var(--paper); }
.btn--ink:hover { background: var(--saffron); color: var(--on-accent); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--rule-2); }
.btn--ghost:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn--quiet { background: var(--surface-2); color: var(--ink); }
.btn--quiet:hover { background: var(--paper-2); }
.btn--sm { padding: .5em .9em; font-size: var(--t-xs); }
.btn--lg { padding: .9em 1.6em; font-size: var(--t-base); }

/* ============================ CARDS ============================ */
.card {
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--r-md); padding: var(--s-5);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.card--link { cursor: pointer; text-decoration: none; display: block; color: inherit; }
.card--link:hover { border-color: var(--rule-2); transform: translateY(-2px); box-shadow: var(--sh-2); }
.card--ink { background: var(--ink); color: var(--paper); border-color: transparent; }
[data-dark="true"] .card--ink { background: #0e0b07; }
.card--ink .muted, [data-dark="true"] .card--ink .muted { color: var(--ink-3); }
.card--pad-lg { padding: var(--s-6); }

/* Hairline grid (replaces the 1px-gap trick, tokenized) */
.hairgrid { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: var(--r-md); overflow: hidden; }
.hairgrid > * { background: var(--surface); padding: var(--s-5); }

/* ============================ BADGES / TAGS ============================ */
.badge {
  display: inline-flex; align-items: center; gap: .4em; white-space: nowrap;
  font-family: var(--mono); font-size: var(--t-xs); font-weight: 600;
  letter-spacing: .04em; padding: .3em .6em; border-radius: var(--r-xs);
  background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--rule);
}
.badge.is-saffron { background: var(--saffron-wash); color: var(--saffron); border-color: transparent; }
.badge.is-indigo  { background: var(--indigo-wash); color: var(--indigo); border-color: transparent; }
.badge.is-forest  { background: var(--forest-wash); color: var(--forest); border-color: transparent; }
.badge.is-brick   { background: var(--brick-wash); color: var(--brick); border-color: transparent; }
.badge--pill { border-radius: var(--r-pill); }

.aff { color: var(--gold); font-weight: 700; }

/* ============================ TABS (one canonical pattern) ============================ */
.tabs { display: inline-flex; gap: .25rem; padding: .3rem; background: var(--surface-2); border: 1px solid var(--rule); border-radius: var(--r-pill); flex-wrap: wrap; }
.tab {
  font-family: var(--sans); font-weight: 600; font-size: var(--t-sm);
  padding: .55em 1.05em; border-radius: var(--r-pill);
  border: none; background: transparent; color: var(--ink-2); cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.tab:hover { color: var(--ink); }
.tab[aria-selected="true"] { background: var(--ink); color: var(--paper); }

/* ============================ DISCLAIMERS ============================ */
.disclaimer {
  border-left: 3px solid var(--rule-2);
  background: var(--surface-2);
  padding: var(--s-3) var(--s-4) var(--s-3) var(--s-5);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: var(--t-sm); color: var(--ink-2); line-height: 1.5;
  display: flex; gap: .7em;
}
.disclaimer svg { flex: none; width: 1.2em; height: 1.2em; margin-top: .1em; }
.disclaimer .dl-label { font-family: var(--mono); font-size: var(--t-xs); letter-spacing: .12em; text-transform: uppercase; font-weight: 600; display: block; margin-bottom: .2em; }
.disclaimer--urgent   { border-left-color: var(--brick);  background: var(--brick-wash); color: var(--brick); }
.disclaimer--urgent .dl-body { color: var(--ink-2); }
[data-dark="true"] .disclaimer--urgent .dl-body { color: var(--ink); }
.disclaimer--standard { border-left-color: var(--saffron); }
.disclaimer--standard .dl-label { color: var(--saffron); }
.disclaimer--affiliate { border-left-color: var(--indigo); }
.disclaimer--affiliate .dl-label { color: var(--indigo); }

/* ============================ INPUTS ============================ */
.field { display: block; }
.field > label { display: block; font-size: var(--t-sm); font-weight: 600; margin-bottom: .4em; color: var(--ink-2); }
.input, .select {
  width: 100%; font-family: var(--sans); font-size: var(--t-base);
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--rule-2); border-radius: var(--r-sm);
  padding: .7em .85em; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.input::placeholder { color: var(--ink-3); }
.input:focus, .select:focus { outline: none; border-color: var(--saffron); box-shadow: 0 0 0 3px var(--saffron-wash); }

/* ============================ FOCUS (a11y, brand color) ============================ */
.fg-root :focus-visible {
  outline: 2px solid var(--saffron);
  outline-offset: 2px;
  border-radius: 3px;
}

/* ============================ AD SLOT (intentional, editorial) ============================ */
.adslot {
  border: 1px dashed var(--rule-2); border-radius: var(--r-md);
  background: repeating-linear-gradient(135deg, var(--surface-2) 0 10px, transparent 10px 20px);
  padding: var(--s-5); display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
}
.adslot .ad-flag { font-family: var(--mono); font-size: var(--t-xs); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.adslot .ad-body { font-size: var(--t-sm); color: var(--ink-2); }

/* ============================ DIVIDER / RULE ============================ */
.rule { height: 1px; background: var(--rule); border: 0; }
.dot { width: 3px; height: 3px; border-radius: 50%; background: var(--ink-3); display: inline-block; vertical-align: middle; }

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  .fg-root *, .fg-root *::before, .fg-root *::after { transition: none !important; animation: none !important; }
}