/* Hallmark · genre: modern-minimal · macrostructure: app shell (function carries the page) · design-system: design.md · designed-as-app
 * theme: custom (vibe: "mid-century: white, warm black, burnt orange, sparingly") · paper oklch(97.4% 0.005 75) · accent oklch(56% 0.16 45) burnt orange
 * display + body: Geist · outlier: Geist Mono (musical keys, CCLI numbers) · axes: light / grotesk-sans / warm
 */
:root {
  /* mid-century: white paper, warm black ink, one burnt orange used sparingly */
  --color-paper:      oklch(97.4% 0.005 75);   /* page: warm paper, a step below the cards so they lift without outlines */
  --color-paper-2:    oklch(100% 0 0);         /* cards, inputs: white */
  --color-sunk:       oklch(95.2% 0.007 70);   /* wells, the track of a switch, hover */
  --color-rule:       oklch(91.5% 0.007 70);
  --color-rule-2:     oklch(85% 0.009 70);     /* input borders */
  --color-muted:      oklch(47% 0.012 60);
  --color-ink:        oklch(18% 0.008 55);     /* warm black */
  --color-ink-press:  oklch(28% 0.01 55);
  --color-on-ink:     oklch(99% 0.003 75);

  /* the accent: burnt orange. Links, the current item, focus, one mark per view. Never status. */
  --color-accent:      oklch(56% 0.16 45);
  --color-accent-soft: oklch(96% 0.025 55);
  --color-focus:       oklch(60% 0.17 45);
  --color-accent-press: oklch(50% 0.16 43);
  --color-on-accent:   oklch(99% 0.003 75);
  --color-accent-tint: oklch(95% 0.035 55);    /* a quiet orange button: an action inside a card, never the view's main one */
  --color-accent-tint-2: oklch(92% 0.05 52);   /* its hover */
  --color-accent-tint-ink: oklch(47% 0.15 43);

  /* states, kept clear of the orange: mustard for "needs attention", brick red for blockers */
  --color-attn:       oklch(44% 0.09 95);
  --color-attn-soft:  oklch(96% 0.05 100);
  --color-attn-mark:  oklch(80% 0.14 98);
  --color-block:      oklch(48% 0.17 25);
  --color-block-soft: oklch(96% 0.025 25);
  --color-ok:         oklch(47% 0.1 150);
  --color-ok-soft:    oklch(96% 0.035 150);

  /* the projected slide: the template's own colours, not UI colours */
  --slide:      #000000;
  --slide-ink:  #FFFFFF;
  --slide-head: #00B0F0;
  --slide-lead: #FFC000;
  --slide-dim:  oklch(62% 0.01 250);            /* placeholder text on a black slide */
  --slide-ghost-1: oklch(100% 0 0 / 0.14);     /* white over a black slide: faint, medium, strong */
  --slide-ghost-2: oklch(100% 0 0 / 0.4);
  --slide-ghost-3: oklch(100% 0 0 / 0.7);
  --color-guide: oklch(64% 0.24 350);           /* snapping guides in the slide editor: must show on any slide */

  --color-scrim:  oklch(17% 0.01 55 / 0.4);
  /* depth, not outlines: a hairline ring, a close lift, a soft ambient layer. Neutral, never tinted. */
  --shadow-card:  0 0 0 1px oklch(20% 0.01 55 / 0.06), 0 1px 2px -1px oklch(20% 0.01 55 / 0.06), 0 2px 4px oklch(20% 0.01 55 / 0.03), 0 8px 16px -8px oklch(20% 0.01 55 / 0.06);
  --shadow-control: 0 0 0 1px oklch(20% 0.01 55 / 0.1), 0 1px 2px -1px oklch(20% 0.01 55 / 0.1), 0 1px 0 oklch(20% 0.01 55 / 0.02);
  --shadow-control-hover: 0 0 0 1px oklch(20% 0.01 55 / 0.18), 0 1px 2px -1px oklch(20% 0.01 55 / 0.12), 0 2px 4px oklch(20% 0.01 55 / 0.04);
  --shadow-thumb: 0 0 0 1px oklch(20% 0.01 55 / 0.06), 0 1px 2px oklch(20% 0.01 55 / 0.1), 0 2px 6px -2px oklch(20% 0.01 55 / 0.1);
  --shadow-pop:   0 0 0 1px oklch(20% 0.01 55 / 0.06), 0 1px 1px -0.5px oklch(20% 0.01 55 / 0.06), 0 3px 3px -1.5px oklch(20% 0.01 55 / 0.06), 0 6px 6px -3px oklch(20% 0.01 55 / 0.06), 0 12px 12px -6px oklch(20% 0.01 55 / 0.06), 0 24px 24px -12px oklch(20% 0.01 55 / 0.06);
  --shadow-whisper: 0 1px 2px oklch(20% 0.01 55 / 0.06);
  --material: oklch(97.4% 0.005 75 / 0.78);    /* the top and bottom bars: the page shows through, blurred */

  /* type: one family, two weights that matter; the mono marks keys and CCLI numbers only */
  --font-body:    "Geist", ui-sans-serif, "Segoe UI", sans-serif;
  --font-display: "Geist", ui-sans-serif, "Segoe UI", sans-serif;
  --font-outlier: "Geist Mono", ui-monospace, Menlo, monospace;
  --text-xs:  0.75rem;    /* 12 · captions, meta */
  --text-sm:  0.875rem;   /* 14 · secondary, controls */
  --text-md:  0.9375rem;  /* 15 · body */
  --text-lg:  1.125rem;   /* 18 · item titles, card titles */
  --text-xl:  1.5rem;     /* 24 · page titles */
  --text-2xl: 2rem;       /* 32 · the service name */
  --tracking-display: -0.022em;
  --text-3xl: 1.875rem;   /* 30 · a page's title */

  /* 4-pt spacing */
  --space-3xs: 0.125rem; --space-2xs: 0.25rem; --space-xs: 0.5rem; --space-sm: 0.75rem;
  --space-md: 1rem; --space-lg: 1.5rem; --space-xl: 2.5rem; --space-2xl: 4rem;

  /* controls: 40px targets, 36px for compact ones inside dense lists */
  --control: 2.5rem;
  --control-sm: 2.25rem;
  --radius-pill: 999px;
  --radius-card: 16px;
  --radius-input: 10px;   /* inputs and buttons alike */
  --radius-chip: 6px;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --dur-micro: 120ms; --dur-short: 220ms; --dur-long: 320ms;

  --z-raised: 10; --z-dropdown: 100; --z-sticky: 200; --z-modal: 400; --z-toast: 500;

  /* names the app's stylesheet already uses, pointed at the system */
  --bg: var(--color-paper); --surface: var(--color-paper-2); --sunk: var(--color-sunk);
  --ink: var(--color-ink); --muted: var(--color-muted); --line: var(--color-rule);
  --accent: var(--color-accent); --accent-ink: var(--color-on-ink); --accent-soft: var(--color-accent-soft);
  --block: var(--color-block); --block-soft: var(--color-block-soft);
  --warn: var(--color-attn); --warn-soft: var(--color-attn-soft);
  --ok: var(--color-ok); --ok-soft: var(--color-ok-soft);
  --f-ui: var(--font-body); --f-title: var(--font-display); --f-mono: var(--font-outlier);
  --r: var(--radius-input);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --color-paper:      oklch(15% 0.006 55);
  --color-paper-2:    oklch(19.5% 0.007 55);
  --color-sunk:       oklch(13% 0.006 55);
  --color-rule:       oklch(27% 0.008 55);
  --color-rule-2:     oklch(36% 0.01 55);
  --color-muted:      oklch(72% 0.01 70);
  --color-ink:        oklch(95% 0.005 75);
  --color-ink-press:  oklch(86% 0.006 75);
  --color-on-ink:     oklch(16% 0.006 55);
  --color-accent:      oklch(70% 0.15 48);
  --color-accent-soft: oklch(27% 0.05 45);
  --color-focus:       oklch(72% 0.15 48);
  --color-accent-press: oklch(76% 0.14 50);
  --color-on-accent:   oklch(16% 0.006 55);
  --color-attn:       oklch(84% 0.12 98);
  --color-attn-soft:  oklch(27% 0.05 95);
  --color-attn-mark:  oklch(62% 0.12 98);
  --color-block:      oklch(72% 0.14 25);
  --color-block-soft: oklch(27% 0.05 25);
  --color-ok:         oklch(76% 0.11 150);
  --color-ok-soft:    oklch(26% 0.04 150);
  --color-scrim:  oklch(6% 0.005 55 / 0.6);
  --color-accent-tint: oklch(30% 0.06 45);
  --color-accent-tint-2: oklch(34% 0.07 45);
  --color-accent-tint-ink: oklch(80% 0.12 52);
  --shadow-card:  0 0 0 1px oklch(100% 0 0 / 0.07);
  --shadow-control: 0 0 0 1px oklch(100% 0 0 / 0.12);
  --shadow-control-hover: 0 0 0 1px oklch(100% 0 0 / 0.2);
  --shadow-thumb: 0 0 0 1px oklch(100% 0 0 / 0.1), 0 1px 2px oklch(0% 0 0 / 0.4);
  --shadow-pop:   0 0 0 1px oklch(100% 0 0 / 0.09), 0 16px 40px oklch(0% 0 0 / 0.5);
  --material: oklch(15% 0.006 55 / 0.78);
  color-scheme: dark;
} }
:root[data-theme="dark"] {
  --color-paper:      oklch(15% 0.006 55);
  --color-paper-2:    oklch(19.5% 0.007 55);
  --color-sunk:       oklch(13% 0.006 55);
  --color-rule:       oklch(27% 0.008 55);
  --color-rule-2:     oklch(36% 0.01 55);
  --color-muted:      oklch(72% 0.01 70);
  --color-ink:        oklch(95% 0.005 75);
  --color-ink-press:  oklch(86% 0.006 75);
  --color-on-ink:     oklch(16% 0.006 55);
  --color-accent:      oklch(70% 0.15 48);
  --color-accent-soft: oklch(27% 0.05 45);
  --color-focus:       oklch(72% 0.15 48);
  --color-accent-press: oklch(76% 0.14 50);
  --color-on-accent:   oklch(16% 0.006 55);
  --color-attn:       oklch(84% 0.12 98);
  --color-attn-soft:  oklch(27% 0.05 95);
  --color-attn-mark:  oklch(62% 0.12 98);
  --color-block:      oklch(72% 0.14 25);
  --color-block-soft: oklch(27% 0.05 25);
  --color-ok:         oklch(76% 0.11 150);
  --color-ok-soft:    oklch(26% 0.04 150);
  --color-scrim:  oklch(6% 0.005 55 / 0.6);
  --color-accent-tint: oklch(30% 0.06 45);
  --color-accent-tint-2: oklch(34% 0.07 45);
  --color-accent-tint-ink: oklch(80% 0.12 52);
  --shadow-card:  0 0 0 1px oklch(100% 0 0 / 0.07);
  --shadow-control: 0 0 0 1px oklch(100% 0 0 / 0.12);
  --shadow-control-hover: 0 0 0 1px oklch(100% 0 0 / 0.2);
  --shadow-thumb: 0 0 0 1px oklch(100% 0 0 / 0.1), 0 1px 2px oklch(0% 0 0 / 0.4);
  --shadow-pop:   0 0 0 1px oklch(100% 0 0 / 0.09), 0 16px 40px oklch(0% 0 0 / 0.5);
  --material: oklch(15% 0.006 55 / 0.78);
  color-scheme: dark;
}