/* ==========================================================================
   Theme: institutional

   The modern-institutional look: sans first, with one restrained serif italic word in a headline,
   white paper and near-black ink, a hairline grey rule, generous spacing and rounded corners, one
   muted accent that follows the realm's hue, a dark band for the call to action.

   Ported from archetype/institutional.css, but self-contained: it needs no Institutional-only class
   and no archetype, only the semantic markup the blocks already have. Every rule is scoped to
   [data-theme="institutional"] (docs/theming.md).
   ========================================================================== */

[data-theme="institutional"] {
  color-scheme: light;

  --background: #ffffff;
  --foreground: #0a0c10;
  --card: #ffffff;
  --card-foreground: #0a0c10;
  --popover: #ffffff;
  --popover-foreground: #0a0c10;
  --muted: #fafafb;
  --muted-foreground: #3a3f48;
  --secondary: #fafafb;
  --secondary-foreground: #0a0c10;
  --accent: oklch(0.96 0.04 var(--realm-hue, 165));
  --accent-foreground: #0a0c10;
  --border: #e8e8ea;
  --input: #e8e8ea;
  --primary: oklch(0.50 0.12 var(--realm-hue, 165));
  --primary-foreground: #ffffff;
  --ring: oklch(0.50 0.12 var(--realm-hue, 165));
  --radius: 10px;

  --theme-font-body: "Inter", ui-sans-serif, system-ui, sans-serif;
  --theme-font-serif: "Source Serif 4", "Source Serif Pro", Georgia, serif;
  --theme-font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  /* One serif italic word per headline */
  --theme-emphasis-font: var(--theme-font-serif);
  --theme-emphasis-style: italic;
  --theme-emphasis-weight: 400;
  --theme-emphasis-color: var(--primary);
  --theme-emphasis-decoration: none;
  --theme-emphasis-background: transparent;
  --theme-emphasis-padding: 0;
  --theme-emphasis-radius: 0;

  --theme-card-gap: 0.75rem;
  --theme-card-padding: 1.5rem;
  --theme-card-border: 1px solid var(--border);
  --theme-card-rule: 1px solid var(--border);
  --theme-card-radius: 10px;
  --theme-card-background: #ffffff;

  /* Steps are a tinted rounded square */
  --theme-number-style: decimal;
  --theme-number-suffix: "";
  --theme-number-size: 2rem;
  --theme-number-font-size: 0.9375rem;
  --theme-number-radius: 6px;
  --theme-number-background: oklch(0.96 0.04 var(--realm-hue, 165));
  --theme-number-color: var(--primary);

  --theme-stat-size: 2.5rem;
  --theme-stat-color: var(--foreground);

  /* The band is dark ink with white type */
  --theme-band-padding: 3rem 2.5rem;
  --theme-band-radius: 10px;
  --theme-band-background: #0a0c10;
  --theme-band-color: #ffffff;
  --theme-band-text-color: rgba(255, 255, 255, 0.75);

  --theme-callout-padding: 1.25rem 1.5rem;
  --theme-callout-border: 1px solid var(--border);
  --theme-callout-rule: 3px solid var(--primary);
  --theme-callout-radius: 6px;
  --theme-callout-background: #fafafb;

  --theme-faq-rule: 1px solid var(--border);
  --theme-faq-marker-closed: "+";
  --theme-faq-marker-open: "\2212";

  --theme-blog-rule: 1px solid var(--border);

  --theme-field-padding: 0.625rem 0.875rem;
  --theme-field-border: 1px solid #d8d8dc;
  --theme-field-radius: 6px;
  --theme-field-background: #ffffff;

  --theme-table-rule: 1px solid var(--border);
  --theme-table-head-rule: 1px solid var(--foreground);

  --theme-header-padding: 1rem 2.5rem;
  --theme-header-rule: 1px solid var(--border);
  --theme-header-background: #ffffff;
  --theme-footer-padding: 3.5rem 2.5rem 2rem;
  --theme-footer-rule: 1px solid var(--border);
  --theme-footer-background: #fafafb;
  --theme-footer-heading-tracking: 0.1em;
  --theme-footer-legal-rule: 1px solid var(--border);
}

/* ---------- type ---------- */

[data-theme="institutional"] h1,
[data-theme="institutional"] h2,
[data-theme="institutional"] h3,
[data-theme="institutional"] h4 {
  font-weight: 600;
  letter-spacing: -0.025em;
}

/* ---------- hero: a dot before the eyebrow, a calm heading ---------- */

[data-theme="institutional"] .hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.75rem;
  border: 1px solid oklch(0.85 0.05 var(--realm-hue, 165));
  border-radius: 100px;
  background: oklch(0.98 0.02 var(--realm-hue, 165));
  color: var(--primary);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: none;
}
[data-theme="institutional"] .hero-eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--primary);
}
[data-theme="institutional"] .hero-heading {
  font-size: clamp(2.25rem, 4.5vw, 3.5rem);
  line-height: 1.08;
  letter-spacing: -0.035em;
}
[data-theme="institutional"] .hero { padding-top: 3.5rem; padding-bottom: 3rem; }

/* ---------- cards: an icon in a tinted box ---------- */

[data-theme="institutional"] .card-list-items .card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 8px;
  background: oklch(0.96 0.04 var(--realm-hue, 165));
}
[data-theme="institutional"] .card-list-items .card-badge {
  padding: 0.125rem 0.5rem;
  border-radius: 100px;
  background: oklch(0.96 0.04 var(--realm-hue, 165));
  color: var(--primary);
}

/* ---------- stat strips: a rule over a row of figures ---------- */

[data-theme="institutional"] .stat-strip-items {
  border-top: 1px solid var(--border);
  padding-top: 1.5rem;
}
[data-theme="institutional"] .stat-strip-items .stat-label {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ---------- call to action band: solid buttons that read on ink ---------- */

[data-theme="institutional"] .cta-band-heading { color: #ffffff; }
[data-theme="institutional"] .cta-band-actions a.bg-primary { background: #ffffff; color: #0a0c10; }
[data-theme="institutional"] .cta-band-actions a.border {
  background: transparent;
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.35);
}

/* ---------- header and footer ---------- */

[data-theme="institutional"] .site-brand::before {
  content: "";
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--primary), oklch(0.40 0.1 var(--realm-hue, 165)));
}
[data-theme="institutional"] .site-nav { gap: 0.5rem 1.75rem; }
[data-theme="institutional"] .site-footer-heading { color: var(--foreground); }