/* Tweakable theme overrides for organizations.html
   Three expressive controls reshape the FEEL of the page:
   - data-tone:    editorial | civic | studio
   - data-density: airy | regular | operator
   (voice is a content swap, not CSS)
*/

/* ─── TONE ──────────────────────────────────────────────────────────────── */

/* editorial = current default — navy + teal + warm cream */
body[data-tone="editorial"] {
  --tone-bg: var(--bg-cool);
  --tone-bg-alt: var(--off-white);
  --tone-dark: var(--navy-900);
  --tone-dark-2: #0c1c33;
  --tone-accent: var(--teal-600);
  --tone-accent-on-dark: var(--teal-500);
  --tone-emphasis: var(--coral-600);
  --tone-emphasis-on-dark: var(--coral-400);
  --tone-rule: var(--gold-500);
  --tone-display-weight: 550;
  --tone-display-italic: italic;
}

/* civic = institutional, RFP-friendly. Deep navy, warm gold accents,
   tighter cream surfaces. Less playful, more board-meeting. */
body[data-tone="civic"] {
  --tone-bg: #ecece4;
  --tone-bg-alt: #f4f1ea;
  --tone-dark: #0a1c33;
  --tone-dark-2: #061222;
  --tone-accent: #8a6a1e;          /* deep gold */
  --tone-accent-on-dark: #d6a24a;
  --tone-emphasis: #8a6a1e;
  --tone-emphasis-on-dark: #e6c277;
  --tone-rule: #d6a24a;
  --tone-display-weight: 600;
  --tone-display-italic: normal;
}
body[data-tone="civic"] {
  background: var(--tone-bg);
}
body[data-tone="civic"] .on-dark { background: var(--tone-dark); }
body[data-tone="civic"] .eyebrow { color: var(--tone-accent); }
body[data-tone="civic"] .on-dark .eyebrow { color: var(--tone-accent-on-dark); }
body[data-tone="civic"] h1.display em,
body[data-tone="civic"] h2.section em { color: var(--tone-emphasis); font-style: normal; text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 6px; text-decoration-color: var(--tone-rule); }
body[data-tone="civic"] .on-dark h1.display em,
body[data-tone="civic"] .on-dark h2.section em { color: var(--tone-emphasis-on-dark); text-decoration-color: var(--tone-rule); }
body[data-tone="civic"] .btn-primary { background: var(--tone-dark); }
body[data-tone="civic"] .btn-on-dark-primary,
body[data-tone="civic"] .on-dark a.btn-on-dark-primary,
body[data-tone="civic"] a.btn-on-dark-primary { background: var(--tone-rule) !important; color: var(--tone-dark) !important; }
body[data-tone="civic"] .btn-on-dark-primary:hover,
body[data-tone="civic"] .on-dark a.btn-on-dark-primary:hover { background: #e6b864 !important; }
body[data-tone="civic"] .gold-rule { background: var(--tone-rule); }

/* studio = warm, design-studio energy. Peach/coral surface,
   ink + cream, more soulful, more handmade. */
body[data-tone="studio"] {
  --tone-bg: #f4ebdf;
  --tone-bg-alt: #fcf6ec;
  --tone-dark: #2a1a14;
  --tone-dark-2: #1c100a;
  --tone-accent: #b8553a;
  --tone-accent-on-dark: #f59070;
  --tone-emphasis: #b8553a;
  --tone-emphasis-on-dark: #f59070;
  --tone-rule: #e8886a;
  --tone-display-weight: 520;
  --tone-display-italic: italic;
}
body[data-tone="studio"] {
  background: var(--tone-bg);
  color: var(--tone-dark);
}
body[data-tone="studio"] .on-dark { background: var(--tone-dark); }
body[data-tone="studio"] .eyebrow { color: var(--tone-accent); }
body[data-tone="studio"] .on-dark .eyebrow { color: var(--tone-accent-on-dark); }
body[data-tone="studio"] h1.display { color: var(--tone-dark); }
body[data-tone="studio"] h2.section { color: var(--tone-dark); }
body[data-tone="studio"] h1.display em,
body[data-tone="studio"] h2.section em { color: var(--tone-emphasis); font-style: italic; }
body[data-tone="studio"] .on-dark h1.display { color: #fdf7ed; }
body[data-tone="studio"] .on-dark h1.display em,
body[data-tone="studio"] .on-dark h2.section em { color: var(--tone-emphasis-on-dark); }
body[data-tone="studio"] .btn-primary { background: var(--tone-accent); }
body[data-tone="studio"] .btn-primary:hover { background: #9c4630; }
body[data-tone="studio"] .btn-on-dark-primary,
body[data-tone="studio"] .on-dark a.btn-on-dark-primary,
body[data-tone="studio"] a.btn-on-dark-primary { background: var(--tone-accent-on-dark) !important; color: var(--tone-dark) !important; }
body[data-tone="studio"] .btn-on-dark-primary:hover,
body[data-tone="studio"] .on-dark a.btn-on-dark-primary:hover { background: #ffa385 !important; }
body[data-tone="studio"] .gold-rule { background: var(--tone-rule); }
body[data-tone="studio"] .surface-enterprise { background: var(--tone-bg); }
body[data-tone="studio"] section[style*="off-white"] { background: var(--tone-bg-alt) !important; }
body[data-tone="studio"] .org-faq-item summary { color: var(--tone-dark); }

/* Apply surface bg to all tones */
body[data-tone] { background: var(--tone-bg); }
body[data-tone] .surface-enterprise { background: var(--tone-bg); }


/* ─── DENSITY ───────────────────────────────────────────────────────────── */

/* airy — editorial, magazine, oversized. Big breath between sections. */
body[data-density="airy"] section { padding: 168px 0; }
body[data-density="airy"] section.tight { padding: 112px 0; }
body[data-density="airy"] h1.display { font-size: clamp(56px, 8vw, 112px); letter-spacing: -0.028em; line-height: 0.98; }
body[data-density="airy"] h2.section { font-size: clamp(40px, 5.2vw, 68px); margin-bottom: 32px; }
body[data-density="airy"] .lede { font-size: clamp(18px, 1.4vw, 22px); line-height: 1.55; max-width: 620px; }
body[data-density="airy"] .org-services { gap: 56px; }
body[data-density="airy"] .org-process-step { padding: 32px 28px; }
body[data-density="airy"] .org-case { padding: 40px 32px; }
body[data-density="airy"] .container-wide { max-width: 1180px; }
body[data-density="airy"] .org-services-head .lede,
body[data-density="airy"] .approach-head .lede { max-width: 640px; }
body[data-density="airy"] .org-hero-grid { gap: 96px; }
body[data-density="airy"] .nav-inner { padding: 28px 0; }

/* operator — dense, businesslike, no-nonsense. Tighter,
   smaller display, more enterprise-dashboard feel. */
body[data-density="operator"] section { padding: 64px 0; }
body[data-density="operator"] section.tight { padding: 40px 0; }
body[data-density="operator"] h1.display { font-size: clamp(34px, 4.4vw, 56px); letter-spacing: -0.014em; line-height: 1.06; margin-bottom: 20px; }
body[data-density="operator"] h2.section { font-size: clamp(24px, 2.6vw, 34px); line-height: 1.15; margin-bottom: 14px; letter-spacing: -0.012em; }
body[data-density="operator"] .lede { font-size: 15.5px; line-height: 1.55; max-width: 560px; }
body[data-density="operator"] .eyebrow { font-size: 11px; margin-bottom: 12px; }
body[data-density="operator"] .org-services { grid-template-columns: repeat(4, 1fr); gap: 18px; }
body[data-density="operator"] .org-service { padding: 22px 18px; }
body[data-density="operator"] .org-service h3 { font-size: 17px; margin: 12px 0 8px; }
body[data-density="operator"] .org-service p { font-size: 14px; }
body[data-density="operator"] .org-service ul li { font-size: 13.5px; padding: 6px 0; }
body[data-density="operator"] .org-process { gap: 14px; }
body[data-density="operator"] .org-process-step { padding: 18px 16px; }
body[data-density="operator"] .org-process-step h4 { font-size: 16px; }
body[data-density="operator"] .org-process-step p { font-size: 13.5px; }
body[data-density="operator"] .org-case { padding: 22px 18px; gap: 12px; }
body[data-density="operator"] .org-case .metric { font-size: 28px; }
body[data-density="operator"] .org-case p { font-size: 14px; }
body[data-density="operator"] .diff { padding: 20px; }
body[data-density="operator"] .diff h3 { font-size: 17px; }
body[data-density="operator"] .diff p { font-size: 14px; }
body[data-density="operator"] .org-hero-grid { gap: 44px; align-items: start; }
body[data-density="operator"] .org-hero-stat .n { font-size: 28px; }
body[data-density="operator"] .org-hero-stat .l { font-size: 13.5px; }
body[data-density="operator"] .nav-inner { padding: 14px 0; }
body[data-density="operator"] .container-wide { max-width: 1280px; }
body[data-density="operator"] .org-faq-item summary { padding: 16px 0; font-size: 16px; }
body[data-density="operator"] .org-faq-item p { font-size: 14px; padding-bottom: 16px; }