/* theme.css: the FreedomDev slide-deck look (Church and AI briefing, InnoSuite guide), loaded after tokens.css.
   Deck palette: navy #0E3556, charcoal #2A2F35, gray #5F6166, pale blue cards #EEF3F8 / #E1EDF7, blue #1B6FB0, light blue #7DBDEB.
   Deck fonts: Cambria headings, Calibri body. Fallbacks cover phones, where those two are not installed. */
:root {
  --font-display: Cambria, Georgia, "Times New Roman", serif;
  --font-ui: Calibri, Carlito, "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --fs-300: 1rem;
  --fs-400: 1.0625rem;

  --bg: #ffffff;
  --surface: #eef3f8;          /* deck cards */
  --surface-2: #e1edf7;        /* deck panels, inset blocks */
  --panel: #e1edf7;
  --ink: #2a2f35;
  --ink-soft: #5b5f65;
  --ink-faint: #8b929a;
  --line: #d3dde8;
  --line-2: #e1e9f1;
  --heading: #0e3556;
  --navy: #0e3556;
  --navy-hover: #174a75;
  --navy-fg: #ffffff;
  --navy-faint: #9ec3df;
  --brand: #0e3556;
  --quote: #7dbdeb;

  --primary: #1b6fb0;
  --primary-hover: #155b92;
  --primary-tint: #d6e8f6;
  --primary-text: #0f4f80;
  --positive: #2f7d5b;
  --positive-tint: #dcefe5;
  --positive-text: #1f6045;
  --btn-bg: var(--primary);
  --on-accent: #ffffff;
  --amber: #8a6d1b;
  --amber-bg: #fbf1d6;
  --amber-text: #6b520f;
  --shadow-1: 0 1px 2px rgba(14, 53, 86, .08);
  --shadow-2: 0 6px 20px rgba(14, 53, 86, .14);
  --radius-1: 5px;
  --radius-2: 6px;
}

@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #0b1f31; --surface: #11304b; --surface-2: #163a59; --panel: #163a59;
  --ink: #e8eef4; --ink-soft: #b3c2d0; --ink-faint: #7f93a6; --line: #25496a; --line-2: #1d3d5a;
  --heading: #e8f1f9; --navy: #08182a; --navy-hover: #0e2a45; --navy-fg: #ffffff; --navy-faint: #8fb3d0;
  --primary: #6db3e8; --primary-hover: #8cc4ef; --primary-tint: #1d4a70; --primary-text: #9fd0f4;
  --positive: #5fbf93; --positive-tint: #1a4a37; --positive-text: #8fe0b8;
  --btn-bg: #1b6fb0; --amber: #e2c878; --amber-bg: #2f2b16; --amber-text: #e2c878;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .4); --shadow-2: 0 6px 20px rgba(0, 0, 0, .5);
}}
:root[data-theme="dark"] {
  --bg: #0b1f31; --surface: #11304b; --surface-2: #163a59; --panel: #163a59;
  --ink: #e8eef4; --ink-soft: #b3c2d0; --ink-faint: #7f93a6; --line: #25496a; --line-2: #1d3d5a;
  --heading: #e8f1f9; --navy: #08182a; --navy-hover: #0e2a45; --navy-fg: #ffffff; --navy-faint: #8fb3d0;
  --primary: #6db3e8; --primary-hover: #8cc4ef; --primary-tint: #1d4a70; --primary-text: #9fd0f4;
  --positive: #5fbf93; --positive-tint: #1a4a37; --positive-text: #8fe0b8;
  --btn-bg: #1b6fb0; --amber: #e2c878; --amber-bg: #2f2b16; --amber-text: #e2c878;
}

h1, h2, h3, h4 { color: var(--heading); font-weight: var(--fw-bold); letter-spacing: 0; }
:focus-visible { outline-color: var(--primary); }
a { color: var(--primary-text); }

/* deck pieces */
.mark { display: block; height: 2.6rem; width: auto; }
.page__head { position: relative; padding-right: 3.5rem; }
.mark--corner { position: absolute; right: 0; top: 0; height: 2.4rem; }
.callout { background: var(--navy); color: #fff; border-radius: var(--radius-1); padding: var(--space-3) var(--space-4) var(--space-3) var(--space-5); position: relative; }
.callout::before { content: "\201C"; position: absolute; left: var(--space-3); top: -.1rem; font-family: var(--font-display); font-size: 2.6rem; line-height: 1; color: var(--quote); }
.badge { display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--navy); color: #fff; font-family: var(--font-display); font-weight: var(--fw-bold); flex: none; }

/* the mark is dark blue and gray on transparent: give it a white tile on dark backgrounds */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .mark { background: #fff; border-radius: 6px; padding: .2rem .35rem; } }
:root[data-theme="dark"] .mark { background: #fff; border-radius: 6px; padding: .2rem .35rem; }