/* Generated by scripts/build-tokens.mjs from design/tokens.json (Vancity Connect design system v2). Do not edit. */
@font-face { font-family: "Anton"; src: url("/fonts/Anton-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("/fonts/InstrumentSerif-Italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("/fonts/InstrumentSerif-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Plus Jakarta Sans"; src: url("/fonts/PlusJakartaSans-Variable.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }
:root, [data-theme="light"] {
  --surface-page: #fcf7ee;
  --surface-card: #ffffff;
  --surface-muted: #f6eee0;
  --surface-raised: #ffffff;
  --surface-inverse: #190e2a;
  --surface-brand: #7c28d1;
  --surface-brand-strong: #631aaa;
  --surface-brand-soft: #f2e9ff;
  --on-brand: #ffffff;
  --text-brand: #7c28d1;
  --surface-action: #ffbe3d;
  --surface-action-strong: #f3a300;
  --on-action: #0e061b;
  --surface-highlight: #ffe7b7;
  --on-highlight: #0e061b;
  --surface-hype: #c81170;
  --on-hype: #ffffff;
  --ink: #190e2a;
  --ink-muted: #564d68;
  --ink-subtle: #726a83;
  --ink-inverse: #fcf7ee;
  --line: #eae0ce;
  --line-strong: #726a83;
  --focus: #7c28d1;
  --focus-inverse: #0e061b;
  --status-confirmed: #077045;
  --status-pending: #8d4e10;
  --status-closed: #af2b25;
  --status-info: #2063b0;
  --status-confirmed-soft: #daf9e7;
  --status-pending-soft: #fff3d9;
  --status-closed-soft: #ffebe9;
  --status-info-soft: #e5f2ff;
  --cat-trip: #7c28d1;
  --cat-trip-soft: #f2e9ff;
  --on-cat-trip: #ffffff;
  --cat-adventure: #c81170;
  --cat-adventure-soft: #ffe5ee;
  --on-cat-adventure: #ffffff;
  --cat-outdoors: #007c84;
  --cat-outdoors-soft: #d4f6f8;
  --on-cat-outdoors: #ffffff;
  --cat-social: #ffbe3d;
  --cat-social-soft: #fff3d9;
  --on-cat-social: #0e061b;
  --cat-growth: #816194;
  --cat-growth-soft: #f5edf9;
  --on-cat-growth: #ffffff;
  --meter-fill: #7c28d1;
  --meter-track: #f2e9ff;
  --meter-fill-hype: #c81170;
  --meter-track-hype: #ffe5ee;
  --data-1: #7c28d1;
  --data-2: #00a0a6;
  --data-3: #d78707;
  --data-4: #ea2486;
  --logo-primary: #7c28d1;
  --logo-secondary: #190e2a;
  --surface-lilac: #d2b9db;
  --surface-lilac-soft: #f5edf9;
  --surface-butter: var(--surface-highlight);
  --on-butter: var(--on-highlight);
  --surface-sunset: var(--surface-action);
  --on-sunset: var(--on-action);
  --surface-pacific: var(--cat-outdoors);
  --on-pacific: var(--on-cat-outdoors);
  --violet-50: #f9f4ff;
  --violet-100: #f2e9ff;
  --violet-200: #e4d3ff;
  --violet-300: #d1b3ff;
  --violet-400: #b887ff;
  --violet-500: #9c52f7;
  --violet-600: #7c28d1;
  --violet-700: #631aaa;
  --violet-800: #4c1683;
  --violet-900: #35115d;
  --violet-950: #210a3c;
  --marigold-50: #fffaed;
  --marigold-100: #fff3d9;
  --marigold-200: #ffe7b7;
  --marigold-300: #ffd68b;
  --marigold-400: #ffbe3d;
  --marigold-500: #f3a300;
  --marigold-600: #d78707;
  --marigold-700: #b36912;
  --marigold-800: #8d4e10;
  --marigold-900: #693609;
  --marigold-950: #461f03;
  --rani-50: #fff3f7;
  --rani-100: #ffe5ee;
  --rani-200: #ffcadc;
  --rani-300: #ffa0c2;
  --rani-400: #ff62a2;
  --rani-500: #ea2486;
  --rani-600: #c81170;
  --rani-700: #a30c5a;
  --rani-800: #7f0e46;
  --rani-900: #5b0b31;
  --rani-950: #39081e;
  --glacier-50: #edfbfc;
  --glacier-100: #d4f6f8;
  --glacier-200: #abecef;
  --glacier-300: #75dae0;
  --glacier-400: #33c0c7;
  --glacier-500: #00a0a6;
  --glacier-600: #007c84;
  --glacier-700: #00636a;
  --glacier-800: #004c53;
  --glacier-900: #00363d;
  --glacier-950: #002227;
  --lavender-50: #faf7fc;
  --lavender-100: #f5edf9;
  --lavender-200: #e9d9f0;
  --lavender-300: #d2b9db;
  --lavender-400: #bb9cc7;
  --lavender-500: #9e7eae;
  --lavender-600: #816194;
  --lavender-700: #664b79;
  --lavender-800: #4e375e;
  --lavender-900: #362642;
  --lavender-950: #21162a;
  --midnight-50: #f7f6fa;
  --midnight-100: #ece9f2;
  --midnight-200: #d8d3e1;
  --midnight-300: #bab4c7;
  --midnight-400: #958ea5;
  --midnight-500: #726a83;
  --midnight-600: #564d68;
  --midnight-700: #3e3451;
  --midnight-800: #291e3c;
  --midnight-900: #190e2a;
  --midnight-950: #0e061b;
  --cream-50: #fefcf8;
  --cream-100: #fcf7ee;
  --cream-200: #f6eee0;
  --cream-300: #eae0ce;
  --cream-400: #d8ccb8;
  --green-600: #077045;
  --green-300: #7fe3b0;
  --green-100: #daf9e7;
  --red-600: #af2b25;
  --red-300: #fb9890;
  --red-100: #ffebe9;
  --blue-600: #2063b0;
  --blue-300: #91c3f6;
  --blue-100: #e5f2ff;
  --shadow-sm: 0 1px 2px rgba(25, 14, 42, 0.06), 0 2px 8px rgba(25, 14, 42, 0.06);
  --shadow-md: 0 2px 4px rgba(25, 14, 42, 0.06), 0 12px 28px rgba(25, 14, 42, 0.12);
  --shadow-lg: 0 24px 60px rgba(25, 14, 42, 0.20);
  --shadow-sticker: 4px 4px 0 #190e2a;
  --shadow-glow: 0 10px 30px rgba(124, 40, 209, 0.28);
}
[data-theme="dark"] {
  --surface-page: #0e061b;
  --surface-card: #190e2a;
  --surface-muted: #291e3c;
  --surface-raised: #291e3c;
  --surface-inverse: #fcf7ee;
  --surface-brand: #7c28d1;
  --surface-brand-strong: #631aaa;
  --surface-brand-soft: #35115d;
  --on-brand: #ffffff;
  --text-brand: #d1b3ff;
  --surface-action: #ffbe3d;
  --surface-action-strong: #ffd68b;
  --on-action: #0e061b;
  --surface-highlight: #ffe7b7;
  --on-highlight: #0e061b;
  --surface-hype: #ff62a2;
  --on-hype: #0e061b;
  --ink: #fcf7ee;
  --ink-muted: #bab4c7;
  --ink-subtle: #958ea5;
  --ink-inverse: #190e2a;
  --line: #291e3c;
  --line-strong: #726a83;
  --focus: #ffbe3d;
  --focus-inverse: #0e061b;
  --status-confirmed: #7fe3b0;
  --status-pending: #ffd68b;
  --status-closed: #fb9890;
  --status-info: #91c3f6;
  --status-confirmed-soft: #0f2a20;
  --status-pending-soft: #2e2109;
  --status-closed-soft: #33100e;
  --status-info-soft: #0d2037;
  --cat-trip: #b887ff;
  --cat-trip-soft: #35115d;
  --on-cat-trip: #0e061b;
  --cat-adventure: #ff62a2;
  --cat-adventure-soft: #5b0b31;
  --on-cat-adventure: #0e061b;
  --cat-outdoors: #33c0c7;
  --cat-outdoors-soft: #00363d;
  --on-cat-outdoors: #0e061b;
  --cat-social: #ffbe3d;
  --cat-social-soft: #2e2109;
  --on-cat-social: #0e061b;
  --cat-growth: #d2b9db;
  --cat-growth-soft: #362642;
  --on-cat-growth: #0e061b;
  --meter-fill: #b887ff;
  --meter-track: #35115d;
  --meter-fill-hype: #ff62a2;
  --meter-track-hype: #5b0b31;
  --data-1: #9c52f7;
  --data-2: #00a0a6;
  --data-3: #b36912;
  --data-4: #ea2486;
  --logo-primary: #ffbe3d;
  --logo-secondary: #fcf7ee;
  --surface-lilac: #362642;
  --surface-lilac-soft: #4e375e;
  --surface-butter: var(--surface-highlight);
  --on-butter: var(--on-highlight);
  --surface-sunset: var(--surface-action);
  --on-sunset: var(--on-action);
  --surface-pacific: var(--cat-outdoors);
  --on-pacific: var(--on-cat-outdoors);
  --violet-50: #f9f4ff;
  --violet-100: #f2e9ff;
  --violet-200: #e4d3ff;
  --violet-300: #d1b3ff;
  --violet-400: #b887ff;
  --violet-500: #9c52f7;
  --violet-600: #7c28d1;
  --violet-700: #631aaa;
  --violet-800: #4c1683;
  --violet-900: #35115d;
  --violet-950: #210a3c;
  --marigold-50: #fffaed;
  --marigold-100: #fff3d9;
  --marigold-200: #ffe7b7;
  --marigold-300: #ffd68b;
  --marigold-400: #ffbe3d;
  --marigold-500: #f3a300;
  --marigold-600: #d78707;
  --marigold-700: #b36912;
  --marigold-800: #8d4e10;
  --marigold-900: #693609;
  --marigold-950: #461f03;
  --rani-50: #fff3f7;
  --rani-100: #ffe5ee;
  --rani-200: #ffcadc;
  --rani-300: #ffa0c2;
  --rani-400: #ff62a2;
  --rani-500: #ea2486;
  --rani-600: #c81170;
  --rani-700: #a30c5a;
  --rani-800: #7f0e46;
  --rani-900: #5b0b31;
  --rani-950: #39081e;
  --glacier-50: #edfbfc;
  --glacier-100: #d4f6f8;
  --glacier-200: #abecef;
  --glacier-300: #75dae0;
  --glacier-400: #33c0c7;
  --glacier-500: #00a0a6;
  --glacier-600: #007c84;
  --glacier-700: #00636a;
  --glacier-800: #004c53;
  --glacier-900: #00363d;
  --glacier-950: #002227;
  --lavender-50: #faf7fc;
  --lavender-100: #f5edf9;
  --lavender-200: #e9d9f0;
  --lavender-300: #d2b9db;
  --lavender-400: #bb9cc7;
  --lavender-500: #9e7eae;
  --lavender-600: #816194;
  --lavender-700: #664b79;
  --lavender-800: #4e375e;
  --lavender-900: #362642;
  --lavender-950: #21162a;
  --midnight-50: #f7f6fa;
  --midnight-100: #ece9f2;
  --midnight-200: #d8d3e1;
  --midnight-300: #bab4c7;
  --midnight-400: #958ea5;
  --midnight-500: #726a83;
  --midnight-600: #564d68;
  --midnight-700: #3e3451;
  --midnight-800: #291e3c;
  --midnight-900: #190e2a;
  --midnight-950: #0e061b;
  --cream-50: #fefcf8;
  --cream-100: #fcf7ee;
  --cream-200: #f6eee0;
  --cream-300: #eae0ce;
  --cream-400: #d8ccb8;
  --green-600: #077045;
  --green-300: #7fe3b0;
  --green-100: #daf9e7;
  --red-600: #af2b25;
  --red-300: #fb9890;
  --red-100: #ffebe9;
  --blue-600: #2063b0;
  --blue-300: #91c3f6;
  --blue-100: #e5f2ff;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 12px 28px rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.65);
  --shadow-sticker: 4px 4px 0 #000000;
  --shadow-glow: 0 0 0 1px rgba(184, 135, 255, 0.22), 0 16px 48px rgba(124, 40, 209, 0.45);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --surface-page: #0e061b;
    --surface-card: #190e2a;
    --surface-muted: #291e3c;
    --surface-raised: #291e3c;
    --surface-inverse: #fcf7ee;
    --surface-brand: #7c28d1;
    --surface-brand-strong: #631aaa;
    --surface-brand-soft: #35115d;
    --on-brand: #ffffff;
    --text-brand: #d1b3ff;
    --surface-action: #ffbe3d;
    --surface-action-strong: #ffd68b;
    --on-action: #0e061b;
    --surface-highlight: #ffe7b7;
    --on-highlight: #0e061b;
    --surface-hype: #ff62a2;
    --on-hype: #0e061b;
    --ink: #fcf7ee;
    --ink-muted: #bab4c7;
    --ink-subtle: #958ea5;
    --ink-inverse: #190e2a;
    --line: #291e3c;
    --line-strong: #726a83;
    --focus: #ffbe3d;
    --focus-inverse: #0e061b;
    --status-confirmed: #7fe3b0;
    --status-pending: #ffd68b;
    --status-closed: #fb9890;
    --status-info: #91c3f6;
    --status-confirmed-soft: #0f2a20;
    --status-pending-soft: #2e2109;
    --status-closed-soft: #33100e;
    --status-info-soft: #0d2037;
    --cat-trip: #b887ff;
    --cat-trip-soft: #35115d;
    --on-cat-trip: #0e061b;
    --cat-adventure: #ff62a2;
    --cat-adventure-soft: #5b0b31;
    --on-cat-adventure: #0e061b;
    --cat-outdoors: #33c0c7;
    --cat-outdoors-soft: #00363d;
    --on-cat-outdoors: #0e061b;
    --cat-social: #ffbe3d;
    --cat-social-soft: #2e2109;
    --on-cat-social: #0e061b;
    --cat-growth: #d2b9db;
    --cat-growth-soft: #362642;
    --on-cat-growth: #0e061b;
    --meter-fill: #b887ff;
    --meter-track: #35115d;
    --meter-fill-hype: #ff62a2;
    --meter-track-hype: #5b0b31;
    --data-1: #9c52f7;
    --data-2: #00a0a6;
    --data-3: #b36912;
    --data-4: #ea2486;
    --logo-primary: #ffbe3d;
    --logo-secondary: #fcf7ee;
    --surface-lilac: #362642;
    --surface-lilac-soft: #4e375e;
    --surface-butter: var(--surface-highlight);
    --on-butter: var(--on-highlight);
    --surface-sunset: var(--surface-action);
    --on-sunset: var(--on-action);
    --surface-pacific: var(--cat-outdoors);
    --on-pacific: var(--on-cat-outdoors);
    --violet-50: #f9f4ff;
    --violet-100: #f2e9ff;
    --violet-200: #e4d3ff;
    --violet-300: #d1b3ff;
    --violet-400: #b887ff;
    --violet-500: #9c52f7;
    --violet-600: #7c28d1;
    --violet-700: #631aaa;
    --violet-800: #4c1683;
    --violet-900: #35115d;
    --violet-950: #210a3c;
    --marigold-50: #fffaed;
    --marigold-100: #fff3d9;
    --marigold-200: #ffe7b7;
    --marigold-300: #ffd68b;
    --marigold-400: #ffbe3d;
    --marigold-500: #f3a300;
    --marigold-600: #d78707;
    --marigold-700: #b36912;
    --marigold-800: #8d4e10;
    --marigold-900: #693609;
    --marigold-950: #461f03;
    --rani-50: #fff3f7;
    --rani-100: #ffe5ee;
    --rani-200: #ffcadc;
    --rani-300: #ffa0c2;
    --rani-400: #ff62a2;
    --rani-500: #ea2486;
    --rani-600: #c81170;
    --rani-700: #a30c5a;
    --rani-800: #7f0e46;
    --rani-900: #5b0b31;
    --rani-950: #39081e;
    --glacier-50: #edfbfc;
    --glacier-100: #d4f6f8;
    --glacier-200: #abecef;
    --glacier-300: #75dae0;
    --glacier-400: #33c0c7;
    --glacier-500: #00a0a6;
    --glacier-600: #007c84;
    --glacier-700: #00636a;
    --glacier-800: #004c53;
    --glacier-900: #00363d;
    --glacier-950: #002227;
    --lavender-50: #faf7fc;
    --lavender-100: #f5edf9;
    --lavender-200: #e9d9f0;
    --lavender-300: #d2b9db;
    --lavender-400: #bb9cc7;
    --lavender-500: #9e7eae;
    --lavender-600: #816194;
    --lavender-700: #664b79;
    --lavender-800: #4e375e;
    --lavender-900: #362642;
    --lavender-950: #21162a;
    --midnight-50: #f7f6fa;
    --midnight-100: #ece9f2;
    --midnight-200: #d8d3e1;
    --midnight-300: #bab4c7;
    --midnight-400: #958ea5;
    --midnight-500: #726a83;
    --midnight-600: #564d68;
    --midnight-700: #3e3451;
    --midnight-800: #291e3c;
    --midnight-900: #190e2a;
    --midnight-950: #0e061b;
    --cream-50: #fefcf8;
    --cream-100: #fcf7ee;
    --cream-200: #f6eee0;
    --cream-300: #eae0ce;
    --cream-400: #d8ccb8;
    --green-600: #077045;
    --green-300: #7fe3b0;
    --green-100: #daf9e7;
    --red-600: #af2b25;
    --red-300: #fb9890;
    --red-100: #ffebe9;
    --blue-600: #2063b0;
    --blue-300: #91c3f6;
    --blue-100: #e5f2ff;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
    --shadow-md: 0 12px 28px rgba(0, 0, 0, 0.55);
    --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.65);
    --shadow-sticker: 4px 4px 0 #000000;
    --shadow-glow: 0 0 0 1px rgba(184, 135, 255, 0.22), 0 16px 48px rgba(124, 40, 209, 0.45);
  }
}
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 72px;
  --space-9: 112px;
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-xl: 36px;
  --radius-pill: 999px;
  --duration-instant: 100ms;
  --duration-quick: 160ms;
  --duration-base: 240ms;
  --duration-slow: 400ms;
  --duration-celebrate: 900ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-enter: cubic-bezier(0.05, 0.7, 0.1, 1);
  --ease-exit: cubic-bezier(0.3, 0, 0.8, 0.15);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --breakpoint-sm: 480px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --layer-base: 0;
  --layer-sticky: 10;
  --layer-overlay: 50;
  --layer-sheet: 60;
  --layer-toast: 70;
  --font-display: Anton, "Arial Narrow", Impact, sans-serif;
  --font-accent: "Instrument Serif", Georgia, "Times New Roman", serif;
  --font-sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  --font-indic: "Anek Gurmukhi", "Anek Devanagari", "Plus Jakarta Sans", sans-serif;
}
.display-mega { font-family: var(--font-display); font-size: 112px; line-height: 0.86; font-weight: 400; letter-spacing: 0.005em; }
.display-hero { font-family: var(--font-display); font-size: 72px; line-height: 0.9; font-weight: 400; letter-spacing: 0.005em; }
.display-xl { font-family: var(--font-display); font-size: 56px; line-height: 0.92; font-weight: 400; letter-spacing: 0.005em; }
.display-lg { font-family: var(--font-display); font-size: 40px; line-height: 0.95; font-weight: 400; letter-spacing: 0.008em; }
.display-md { font-family: var(--font-display); font-size: 28px; line-height: 1; font-weight: 400; letter-spacing: 0.01em; }
.display-sm { font-family: var(--font-display); font-size: 20px; line-height: 1.1; font-weight: 400; letter-spacing: 0.02em; }
.stat-number { font-family: var(--font-display); font-size: 48px; line-height: 0.9; font-weight: 400; letter-spacing: 0.01em; }
.accent-xl { font-family: var(--font-accent); font-size: 64px; line-height: 0.98; font-weight: 400; font-style: italic; }
.accent-lg { font-family: var(--font-accent); font-size: 40px; line-height: 1.05; font-weight: 400; font-style: italic; }
.accent-md { font-family: var(--font-accent); font-size: 28px; line-height: 1.15; font-weight: 400; font-style: italic; }
.quote { font-family: var(--font-accent); font-size: 24px; line-height: 1.3; font-weight: 400; font-style: italic; }
.title-lg { font-family: var(--font-sans); font-size: 28px; line-height: 34px; font-weight: 800; letter-spacing: -0.01em; }
.title-md { font-family: var(--font-sans); font-size: 22px; line-height: 28px; font-weight: 800; letter-spacing: -0.005em; }
.title-sm { font-family: var(--font-sans); font-size: 18px; line-height: 24px; font-weight: 700; }
.lead { font-family: var(--font-sans); font-size: 20px; line-height: 30px; font-weight: 500; }
.body { font-family: var(--font-sans); font-size: 16px; line-height: 26px; font-weight: 400; }
.body-sm { font-family: var(--font-sans); font-size: 14px; line-height: 22px; font-weight: 400; }
.label { font-family: var(--font-sans); font-size: 14px; line-height: 20px; font-weight: 700; }
.label-sm { font-family: var(--font-sans); font-size: 12px; line-height: 16px; font-weight: 700; }
.eyebrow { font-family: var(--font-sans); font-size: 12px; line-height: 16px; font-weight: 800; letter-spacing: 0.14em; }
.caption { font-family: var(--font-sans); font-size: 13px; line-height: 18px; font-weight: 500; }
.price { font-family: var(--font-sans); font-size: 22px; line-height: 26px; font-weight: 800; }
.indic-display { font-family: var(--font-indic); font-size: 56px; line-height: 1.15; font-weight: 700; }
.indic-body { font-family: var(--font-indic); font-size: 16px; line-height: 26px; font-weight: 500; }