/*
  The Meeting, Dylan's design system: tokens as CSS custom properties.
  Generated from tokens.json (version 2, synced 2026-10-05). Source: https://meetdylan.ai/design

  Light ("Paper") by default. Dark ("Charcoal") follows the system
  unless <html data-theme="light">; <html data-theme="dark"> forces it.
  Fonts are not included: load Bricolage Grotesque and Hanken Grotesk (SIL Open Font License).
  One 15-minute slot is 12px. Red means now.
*/
:root {
  color-scheme: light;
  --mtg-paper: #FBF9F5;
  --mtg-sheet: #FFFFFF;
  --mtg-offhours: #F3F0EA;
  --mtg-line: #E4DFD6;
  --mtg-line-soft: #EEEBE5;
  --mtg-rule: #948E83;
  --mtg-ink: #1B1A17;
  --mtg-ink-2: #55524B;
  --mtg-ink-3: #6E6A63;
  --mtg-now: #CC3417;
  --mtg-now-ink: #FFFFFF;
  --mtg-now-tint: #FBE9E5;
  --mtg-now-text: #B82E14;
  --mtg-sage-fill: #DFECDD;
  --mtg-sage-ink: #245C2F;
  --mtg-slate-fill: #DFE8F5;
  --mtg-slate-ink: #274A7E;
  --mtg-plum-fill: #EEE2F1;
  --mtg-plum-ink: #62347A;
  --mtg-amber-fill: #F8EBD2;
  --mtg-amber-ink: #6E4A0B;
  --mtg-teal-fill: #DBEFEC;
  --mtg-teal-ink: #1A5A57;
  --mtg-stone-fill: #ECE9E2;
  --mtg-stone-ink: #4F4C45;
  --mtg-stone-line: #8A857A;
  --mtg-chrome: #F7F5F0;
  --mtg-dim: rgba(27,26,23,0.42);
  --mtg-scrim: rgba(251,249,245,0.9);
  --mtg-hatch-alpha: 55%;
  --mtg-glow: rgba(204,52,23,0.07);
  --mtg-sage-line: var(--mtg-sage-ink);
  --mtg-slate-line: var(--mtg-slate-ink);
  --mtg-plum-line: var(--mtg-plum-ink);
  --mtg-amber-line: var(--mtg-amber-ink);
  --mtg-teal-line: var(--mtg-teal-ink);
  --mtg-shadow-card: 0 12px 24px -12px rgba(27,26,23,0.22), 0 1px 0 rgba(27,26,23,0.06);
  --mtg-shadow-pop: 0 24px 48px -24px rgba(27,26,23,0.35), 0 0 0 1px rgba(27,26,23,0.06);
  --mtg-shadow-win: 0 1px 0 rgba(27,26,23,.04), 0 24px 48px -18px rgba(60,40,10,.18), 0 70px 120px -50px rgba(60,40,10,.22);
  --mtg-shadow-toast: 0 1px 0 rgba(27,26,23,.04), 0 16px 32px -12px rgba(27,26,23,.28), 0 0 0 1px rgba(27,26,23,.05);

  --mtg-font-display: 'Bricolage Grotesque', 'Hanken Grotesk', system-ui, sans-serif;
  --mtg-font-text: 'Hanken Grotesk', system-ui, sans-serif;
  --mtg-font-terminal: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --mtg-type-hero: 600 88px/88px var(--mtg-font-display);
  --mtg-type-hero-tracking: -0.025em;
  --mtg-type-title: 600 48px/52px var(--mtg-font-display);
  --mtg-type-title-tracking: -0.03em;
  --mtg-type-h3: 600 28px/34px var(--mtg-font-display);
  --mtg-type-h3-tracking: -0.02em;
  --mtg-type-h4: 600 20px/26px var(--mtg-font-display);
  --mtg-type-h4-tracking: -0.01em;
  --mtg-type-numeral: 700 44px/48px var(--mtg-font-display);
  --mtg-type-numeral-tracking: -0.025em;
  --mtg-type-lead: 400 20px/30px var(--mtg-font-text);
  --mtg-type-lead-tracking: 0;
  --mtg-type-body: 400 17px/28px var(--mtg-font-text);
  --mtg-type-body-tracking: 0;
  --mtg-type-small: 400 14px/20px var(--mtg-font-text);
  --mtg-type-small-tracking: 0;
  --mtg-type-caption: 500 12px/16px var(--mtg-font-text);
  --mtg-type-caption-tracking: 0.01em;
  --mtg-type-label: 600 12px/12px var(--mtg-font-text);
  --mtg-type-label-tracking: 0.06em;
  --mtg-type-app: 400 13px/18px var(--mtg-font-text);
  --mtg-type-app-tracking: 0;
  --mtg-type-block: 600 12px/13px var(--mtg-font-text);
  --mtg-type-block-tracking: 0;

  --mtg-half-slot: 6px;
  --mtg-slot: 12px;
  --mtg-2slot: 24px;
  --mtg-3slot: 36px;
  --mtg-hour: 48px;
  --mtg-2h: 96px;
  --mtg-3h: 144px;
  --mtg-gutter: 60px;
  --mtg-page: 1200px;
  --mtg-edge: 24px;
  --mtg-sec: 120px;
  --mtg-app-hour: 80px;

  --mtg-block: 6px;
  --mtg-card: 12px;
  --mtg-pill: 999px;
  --mtg-d: 50%;
  --mtg-win: 16px;

  --mtg-tick: 120ms;
  --mtg-settle: 520ms;
  --mtg-stagger: 70ms;
  --mtg-rise: 420ms;
  --mtg-count: 900ms;
  --mtg-toast-in: 280ms;
  --mtg-toast-out: 220ms;
  --mtg-stamp: 140ms;
  --mtg-check: 360ms;
  --mtg-minute: 1s;
  --mtg-spring: cubic-bezier(.2, 1.2, .35, 1);
  --mtg-ease-out: cubic-bezier(.2, .8, .2, 1);
  --mtg-ease: cubic-bezier(.2, 0, 0, 1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --mtg-paper: #1B1A18;
    --mtg-sheet: #222120;
    --mtg-offhours: #1E1D1B;
    --mtg-line: #363430;
    --mtg-line-soft: #2C2B28;
    --mtg-rule: #726D64;
    --mtg-ink: #F1EEE7;
    --mtg-ink-2: #B9B4A9;
    --mtg-ink-3: #9A958A;
    --mtg-now: #FF6B4A;
    --mtg-now-ink: #1B1A18;
    --mtg-now-tint: #3A241F;
    --mtg-now-text: #FF6B4A;
    --mtg-sage-fill: #8FD19B;
    --mtg-sage-ink: #10231A;
    --mtg-slate-fill: #97B8EC;
    --mtg-slate-ink: #0F1A2E;
    --mtg-plum-fill: #D3A8E0;
    --mtg-plum-ink: #2A1633;
    --mtg-amber-fill: #EFC26E;
    --mtg-amber-ink: #2A1D05;
    --mtg-teal-fill: #82D3CC;
    --mtg-teal-ink: #0B2523;
    --mtg-stone-fill: #3B3934;
    --mtg-stone-ink: #DAD5CA;
    --mtg-stone-line: #7B766C;
    --mtg-chrome: #262523;
    --mtg-dim: rgba(0,0,0,0.6);
    --mtg-scrim: rgba(27,26,24,0.9);
    --mtg-hatch-alpha: 70%;
    --mtg-glow: rgba(255,107,74,0.06);
    --mtg-sage-line: var(--mtg-sage-fill);
    --mtg-slate-line: var(--mtg-slate-fill);
    --mtg-plum-line: var(--mtg-plum-fill);
    --mtg-amber-line: var(--mtg-amber-fill);
    --mtg-teal-line: var(--mtg-teal-fill);
    --mtg-shadow-card: 0 12px 24px -12px rgba(0,0,0,0.6), 0 1px 0 rgba(255,255,255,0.04);
    --mtg-shadow-pop: 0 24px 48px -24px rgba(0,0,0,0.8), 0 0 0 1px rgba(255,255,255,0.06);
    --mtg-shadow-win: 0 1px 0 rgba(255,255,255,.03), 0 24px 48px -18px rgba(0,0,0,.55), 0 70px 120px -50px rgba(0,0,0,.7);
    --mtg-shadow-toast: 0 1px 0 rgba(255,255,255,.03), 0 16px 32px -12px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.07);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --mtg-paper: #1B1A18;
  --mtg-sheet: #222120;
  --mtg-offhours: #1E1D1B;
  --mtg-line: #363430;
  --mtg-line-soft: #2C2B28;
  --mtg-rule: #726D64;
  --mtg-ink: #F1EEE7;
  --mtg-ink-2: #B9B4A9;
  --mtg-ink-3: #9A958A;
  --mtg-now: #FF6B4A;
  --mtg-now-ink: #1B1A18;
  --mtg-now-tint: #3A241F;
  --mtg-now-text: #FF6B4A;
  --mtg-sage-fill: #8FD19B;
  --mtg-sage-ink: #10231A;
  --mtg-slate-fill: #97B8EC;
  --mtg-slate-ink: #0F1A2E;
  --mtg-plum-fill: #D3A8E0;
  --mtg-plum-ink: #2A1633;
  --mtg-amber-fill: #EFC26E;
  --mtg-amber-ink: #2A1D05;
  --mtg-teal-fill: #82D3CC;
  --mtg-teal-ink: #0B2523;
  --mtg-stone-fill: #3B3934;
  --mtg-stone-ink: #DAD5CA;
  --mtg-stone-line: #7B766C;
  --mtg-chrome: #262523;
  --mtg-dim: rgba(0,0,0,0.6);
  --mtg-scrim: rgba(27,26,24,0.9);
  --mtg-hatch-alpha: 70%;
  --mtg-glow: rgba(255,107,74,0.06);
  --mtg-sage-line: var(--mtg-sage-fill);
  --mtg-slate-line: var(--mtg-slate-fill);
  --mtg-plum-line: var(--mtg-plum-fill);
  --mtg-amber-line: var(--mtg-amber-fill);
  --mtg-teal-line: var(--mtg-teal-fill);
  --mtg-shadow-card: 0 12px 24px -12px rgba(0,0,0,0.6), 0 1px 0 rgba(255,255,255,0.04);
  --mtg-shadow-pop: 0 24px 48px -24px rgba(0,0,0,0.8), 0 0 0 1px rgba(255,255,255,0.06);
  --mtg-shadow-win: 0 1px 0 rgba(255,255,255,.03), 0 24px 48px -18px rgba(0,0,0,.55), 0 70px 120px -50px rgba(0,0,0,.7);
  --mtg-shadow-toast: 0 1px 0 rgba(255,255,255,.03), 0 16px 32px -12px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.07);
}

@media (max-width: 1099px) {
  :root {
    --mtg-type-hero: 600 64px/66px var(--mtg-font-display);
  }
}
@media (max-width: 767px) {
  :root {
    --mtg-edge: 16px;
    --mtg-sec: 72px;
    --mtg-type-hero: 600 44px/46px var(--mtg-font-display);
    --mtg-type-hero-tracking: -0.03em;
    --mtg-type-title: 600 34px/38px var(--mtg-font-display);
    --mtg-type-h3: 600 24px/30px var(--mtg-font-display);
    --mtg-type-numeral: 700 36px/40px var(--mtg-font-display);
    --mtg-type-lead: 400 18px/27px var(--mtg-font-text);
  }
}

/* With reduced motion nothing moves; every end state is already on screen. */
@media (prefers-reduced-motion: reduce) {
  :root { --mtg-tick: 0ms; --mtg-settle: 0ms; --mtg-stagger: 0ms; --mtg-rise: 0ms; --mtg-count: 0ms; --mtg-toast-in: 0ms; --mtg-toast-out: 0ms; --mtg-stamp: 0ms; --mtg-check: 0ms; }
}