/* ============================================================
   TWEAKS — Expressive overrides
   Mood / Pace / Accent reshape the whole page via data-attrs.
   ============================================================ */

/* ---------- ACCENT ---------- */
/* Retints every gold mark across the page in one stroke. */
body[data-accent="safety"] {
  --eagles-gold: #E55934;
  --gold-light:  #FF7A52;
  --gold-deep:   #B43A1E;
  --status-warning: #E55934;
}
body[data-accent="crimson"] {
  --eagles-gold: #B7344B;
  --gold-light:  #D75066;
  --gold-deep:   #8A2438;
  --status-warning: #B7344B;
}
body[data-accent="sky"] {
  --eagles-gold: #3C6E9E;
  --gold-light:  #5A8FBD;
  --gold-deep:   #2A4F73;
  --status-warning: #3C6E9E;
}

/* ---------- MOOD: NIGHTSHIFT ----------
   The entire page becomes a dark dispatch floor.
   Cream → forest. Green ink → warm cream. Gold survives. */
body[data-mood="nightshift"] {
  --off-white:   #122312;
  --ivory:       #1a2d1a;
  --pure-white:  #0E1F0E;
  --eagle-green: #F0EDDF;
  --forest-mid:  #C9A84C;
  --forest-deep: #08130A;
  --ink:         #F5F5F0;
  --stone-700:   rgba(240,237,223,0.74);
  --stone-500:   rgba(240,237,223,0.48);
  --stone-300:   rgba(240,237,223,0.20);
  --stone-100:   rgba(255,255,255,0.10);
  --border-soft: rgba(255,255,255,0.10);
  background: #122312;
  color: #f0eddf;
}
body[data-mood="nightshift"] .nav {
  background: rgba(14,28,14,0.86);
  border-bottom-color: rgba(255,255,255,0.10);
}
body[data-mood="nightshift"] .section.muted { background: #1a2d1a; }
body[data-mood="nightshift"] .section.dark  { background: #08130A; }
body[data-mood="nightshift"] .hero,
body[data-mood="nightshift"] .hero { border-bottom-color: rgba(255,255,255,0.08); }

body[data-mood="nightshift"] .display,
body[data-mood="nightshift"] .section-title,
body[data-mood="nightshift"] .nav-brand-name,
body[data-mood="nightshift"] .about-stack-title,
body[data-mood="nightshift"] .audience-col.yes h4,
body[data-mood="nightshift"] .get-card-title,
body[data-mood="nightshift"] .how-step-title,
body[data-mood="nightshift"] .system-step-title,
body[data-mood="nightshift"] .case-name,
body[data-mood="nightshift"] .problem-list li,
body[data-mood="nightshift"] .audience-text {
  color: #f0eddf;
}
body[data-mood="nightshift"] .about-copy strong { color: var(--eagles-gold); }

body[data-mood="nightshift"] .get-card,
body[data-mood="nightshift"] .case-row,
body[data-mood="nightshift"] .problem-result {
  background: rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.10);
}
body[data-mood="nightshift"] .get-card-icon {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.10);
  color: var(--eagles-gold);
}
body[data-mood="nightshift"] .system-step-icon { color: var(--eagles-gold); }
body[data-mood="nightshift"] .system-step-num { color: rgba(255,255,255,0.06); }
body[data-mood="nightshift"] .how-step-icon { color: var(--eagles-gold); }

body[data-mood="nightshift"] .case-bar-track { background: rgba(255,255,255,0.08); }
body[data-mood="nightshift"] .case-bar-fill.before { background: rgba(255,255,255,0.20); }
body[data-mood="nightshift"] .case-bar-fill.after  { background: var(--eagles-gold); }
body[data-mood="nightshift"] .case-bar-value { color: #f0eddf; }

body[data-mood="nightshift"] .btn-green {
  background: var(--eagles-gold);
  color: #0E1F0E;
}
body[data-mood="nightshift"] .btn-green:hover { background: var(--gold-light); }
body[data-mood="nightshift"] .btn-outline {
  border-color: var(--eagles-gold);
  color: var(--eagles-gold);
}
body[data-mood="nightshift"] .btn-outline:hover {
  background: var(--eagles-gold);
  color: #0E1F0E;
}

body[data-mood="nightshift"] .audience-col.no .audience-text {
  color: rgba(240,237,223,0.38);
  text-decoration-color: rgba(240,237,223,0.20);
}
body[data-mood="nightshift"] .audience-icon.yes { color: var(--eagles-gold); }
body[data-mood="nightshift"] .case-name .badge { background: rgba(255,255,255,0.06); color: rgba(240,237,223,0.6); }

/* ---------- MOOD: CARBON ----------
   Strip the green entirely. Editorial ink-on-ivory with the accent
   as the only color. Feels like a broadsheet, not a logistics site. */
body[data-mood="carbon"] {
  --eagle-green: #14160F;
  --forest-mid:  #2A2A22;
  --forest-deep: #000000;
  --off-white:   #FBFAF4;
  --ivory:       #EFEDE2;
  --stone-100:   #DAD8CC;
  --stone-300:   #B5B3A6;
  --stone-500:   #6E6C5F;
  --stone-700:   #2F2D24;
  --ink:         #14160F;
  background: #FBFAF4;
}
body[data-mood="carbon"] .nav { background: rgba(251,250,244,0.88); }
body[data-mood="carbon"] .btn-green { background: #14160F; color: #FBFAF4; }
body[data-mood="carbon"] .btn-green:hover { background: #000; }
body[data-mood="carbon"] .btn-outline { border-color: #14160F; color: #14160F; }
body[data-mood="carbon"] .btn-outline:hover { background: #14160F; color: #FBFAF4; }
body[data-mood="carbon"] .section.dark { background: #14160F; }
body[data-mood="carbon"] .cta-section { background: #14160F; }
body[data-mood="carbon"] .footer { background: #000000; }
body[data-mood="carbon"] .case-bar-fill.after { background: #14160F; }

/* ---------- PACE: OPERATOR ----------
   Dense terminal energy. Pull display sizes down, tighten section
   padding, shrink card padding, compress hero strip. Reads like a
   dashboard, not a brochure. */
body[data-pace="operator"] .section          { padding: 64px 0; }
body[data-pace="operator"] .hero             { padding: 64px 0 52px; }
body[data-pace="operator"] .hero-watermark   { width: 560px; opacity: 0.04; top: 24px; right: -120px; }
body[data-pace="operator"] .hero-strip       { margin-top: 56px; padding-top: 28px; }
body[data-pace="operator"] .hero-strip-num   { font-size: 26px; }
body[data-pace="operator"] .section-head     { margin-bottom: 40px; }
body[data-pace="operator"] .display          { font-size: clamp(38px, 5.2vw, 64px); letter-spacing: -0.015em; }
body[data-pace="operator"] .section-title    { font-size: clamp(26px, 3vw, 38px); letter-spacing: -0.01em; }
body[data-pace="operator"] .lead             { font-size: 15.5px; margin-top: 16px; }
body[data-pace="operator"] .hero-ctas        { margin-top: 28px; }
body[data-pace="operator"] .get-card         { padding: 24px; }
body[data-pace="operator"] .get-card-list li { font-size: 14px; }
body[data-pace="operator"] .case-row         { padding: 20px 20px 18px; }
body[data-pace="operator"] .case-row-gain    { font-size: 20px; }
body[data-pace="operator"] .case-block + .case-block { margin-top: 48px; padding-top: 48px; }
body[data-pace="operator"] .about-stack-item        { padding: 18px 0; }
body[data-pace="operator"] .about-stack-item:first-child { padding-top: 0; }
body[data-pace="operator"] .audience-list li       { padding: 14px 0; }
body[data-pace="operator"] .audience-text          { font-size: 15px; }
body[data-pace="operator"] .problem-list li        { padding: 12px 0; font-size: 15px; }
body[data-pace="operator"] .system-step-num        { font-size: 40px; }
body[data-pace="operator"] .system-step-title      { font-size: 14px; margin-top: 18px; }
body[data-pace="operator"] .system-step-body       { font-size: 13px; }
body[data-pace="operator"] .how-step               { padding-top: 28px; padding-bottom: 28px; }
body[data-pace="operator"] .result-card            { padding: 22px 20px; }
body[data-pace="operator"] .nav-inner              { height: 60px; }

/* ---------- PACE: CINEMATIC ----------
   Editorial, slow, oversized. Hero type takes the whole viewport,
   sections breathe, strip numbers become headlines. */
body[data-pace="cinematic"] .section          { padding: 180px 0; }
body[data-pace="cinematic"] .hero             { padding: 160px 0 140px; }
body[data-pace="cinematic"] .hero-watermark   { width: 1100px; opacity: 0.07; }
body[data-pace="cinematic"] .display          { font-size: clamp(72px, 11vw, 156px); line-height: 0.96; letter-spacing: -0.04em; }
body[data-pace="cinematic"] .section-title    { font-size: clamp(48px, 6.2vw, 96px); line-height: 1.02; letter-spacing: -0.035em; }
body[data-pace="cinematic"] .section-head     { margin-bottom: 120px; max-width: 920px; }
body[data-pace="cinematic"] .lead             { font-size: 22px; line-height: 1.5; margin-top: 32px; max-width: 38ch; }
body[data-pace="cinematic"] .hero-lead        { max-width: 28ch; }
body[data-pace="cinematic"] .hero-ctas        { margin-top: 64px; }
body[data-pace="cinematic"] .hero-strip       { margin-top: 140px; padding-top: 56px; }
body[data-pace="cinematic"] .hero-strip-num   { font-size: 52px; }
body[data-pace="cinematic"] .hero-strip-label { margin-top: 18px; }
body[data-pace="cinematic"] .get-card         { padding: 56px; }
body[data-pace="cinematic"] .case-row         { padding: 36px 36px 30px; }
body[data-pace="cinematic"] .case-row-gain    { font-size: 36px; }
body[data-pace="cinematic"] .case-block + .case-block { margin-top: 120px; padding-top: 120px; }
body[data-pace="cinematic"] .system-step-num  { font-size: 84px; }
body[data-pace="cinematic"] .about-stack-item { padding: 36px 0; }
body[data-pace="cinematic"] .audience-list li { padding: 30px 0; }
body[data-pace="cinematic"] .audience-text    { font-size: 20px; }
body[data-pace="cinematic"] .problem-list li  { padding: 24px 0; font-size: 20px; }
body[data-pace="cinematic"] .how-step         { padding-top: 56px; padding-bottom: 56px; }

/* Smooth the transition between paces — feels expressive, not jarring. */
.section, .hero, .display, .section-title, .lead,
.hero-strip, .hero-strip-num, .get-card, .case-row,
.system-step-num, .about-stack-item, .audience-list li,
.problem-list li, .how-step, .nav, .result-card,
body {
  transition: padding 320ms cubic-bezier(0.2,0.7,0.2,1),
              font-size 320ms cubic-bezier(0.2,0.7,0.2,1),
              margin 320ms cubic-bezier(0.2,0.7,0.2,1),
              background 320ms cubic-bezier(0.2,0.7,0.2,1),
              color 320ms cubic-bezier(0.2,0.7,0.2,1),
              border-color 320ms cubic-bezier(0.2,0.7,0.2,1);
}