/* WalkIn brand tokens. Generated from brand/tokens.json (the WalkIn design system).
   Load this before any page stylesheet. Light by default, dark follows the device
   unless the page sets data-theme="light" or data-theme="dark" on <html>. */
@font-face { font-family: "Fraunces"; src: url("fonts/Fraunces-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("fonts/InstrumentSans-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("fonts/InstrumentSans-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("fonts/InstrumentSans-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-pill: 999px;
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}
:root, [data-theme="light"] {
  color-scheme: light;
  --bg: #fbf8fb;
  --panel: #ffffff;
  --tint: #f3e4f0;
  --line: #ece4ee;
  --line-2: #d9c9d6;
  --ink: #2d2a3e;
  --ink-2: #4a4660;
  --muted: #6b6680;
  --brand: #8e4f85;
  --on-brand: #ffffff;
  --brand-hover: #7a4272;
  --blush: #e3b6dc;
  --nav: #2d2a3e;
  --on-nav: #f1ecf4;
  --on-nav-muted: #b9b3c9;
  --hot: #c2410c;
  --hot-bg: #ffedd5;
  --warm: #a16207;
  --warm-bg: #fef3c7;
  --cool: #475569;
  --cool-bg: #eef2f7;
  --ok: #15803d;
  --ok-bg: #dcfce7;
  --bad: #b91c1c;
  --bad-bg: #fee2e2;
  --chat-bg: #f6f1f6;
  --bubble-customer: #ffffff;
  --bubble-dan: var(--tint);
  --focus: var(--brand);
  --shadow-card: 0 1px 2px rgba(45,42,62,.06), 0 4px 16px rgba(45,42,62,.06);
  --shadow-bubble: 0 1px 1px rgba(45,42,62,.08);
  --shadow-nav: 0 -1px 0 #ece4ee, 0 -8px 24px rgba(45,42,62,.06);
  /* WhatsApp's own colours, for every chat view (light) */
  --wa-wallpaper: #efeae2;
  --wa-header: #008069;
  --wa-on-header: #ffffff;
  --wa-on-header-muted: rgba(255,255,255,.85);
  --wa-avatar: #dfe5e7;
  --wa-avatar-ink: #54656f;
  --wa-bubble-in: #ffffff;
  --wa-bubble-out: #d9fdd3;
  --wa-ink: #111b21;
  --wa-meta: #667781;
  --wa-link: #027eb5;
  --wa-line: #e9edef;
  --wa-hover: #f5f6f6;
  --wa-shadow: rgba(11,20,26,.13);
  --wa-media-ink: #54656f;
  --wa-sys: #fff3c4;
  --wa-green: #008069;
  --wa-img-bg: #e9edef;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #17151f;
    --panel: #211e2c;
    --tint: #352a3d;
    --line: #332e42;
    --line-2: #4a4360;
    --ink: #f1ecf4;
    --ink-2: #d8d2e2;
    --muted: #b9b3c9;
    --brand: #e3b6dc;
    --on-brand: #2d2a3e;
    --brand-hover: #ecc9e6;
    --blush: #e3b6dc;
    --nav: #110f17;
    --on-nav: #f1ecf4;
    --on-nav-muted: #9c95ae;
    --hot: #fb923c;
    --hot-bg: #3d2216;
    --warm: #facc15;
    --warm-bg: #3a3012;
    --cool: #a5b4c8;
    --cool-bg: #252c38;
    --ok: #4ade80;
    --ok-bg: #14301f;
    --bad: #f87171;
    --bad-bg: #3a1a1d;
    --chat-bg: #1c1926;
    --bubble-customer: #2a2637;
    --bubble-dan: var(--tint);
    --focus: var(--brand);
    --shadow-card: 0 1px 2px rgba(0,0,0,.4);
    --shadow-bubble: none;
    --shadow-nav: 0 -1px 0 #332e42;
    /* WhatsApp's own dark-mode colours */
    --wa-wallpaper: #0b141a;
    --wa-header: #202c33;
    --wa-on-header: #e9edef;
    --wa-on-header-muted: #8696a0;
    --wa-avatar: #6a7175;
    --wa-avatar-ink: #cfd4d6;
    --wa-bubble-in: #202c33;
    --wa-bubble-out: #005c4b;
    --wa-ink: #e9edef;
    --wa-meta: #8696a0;
    --wa-link: #53bdeb;
    --wa-line: #2a3942;
    --wa-hover: #182229;
    --wa-shadow: rgba(0,0,0,.3);
    --wa-media-ink: #aebac1;
    --wa-sys: #182229;
    --wa-green: #00a884;
    --wa-img-bg: #2a3942;
  }
}
[data-theme="dark"] {
  color-scheme: dark;
  --bg: #17151f;
  --panel: #211e2c;
  --tint: #352a3d;
  --line: #332e42;
  --line-2: #4a4360;
  --ink: #f1ecf4;
  --ink-2: #d8d2e2;
  --muted: #b9b3c9;
  --brand: #e3b6dc;
  --on-brand: #2d2a3e;
  --brand-hover: #ecc9e6;
  --blush: #e3b6dc;
  --nav: #110f17;
  --on-nav: #f1ecf4;
  --on-nav-muted: #9c95ae;
  --hot: #fb923c;
  --hot-bg: #3d2216;
  --warm: #facc15;
  --warm-bg: #3a3012;
  --cool: #a5b4c8;
  --cool-bg: #252c38;
  --ok: #4ade80;
  --ok-bg: #14301f;
  --bad: #f87171;
  --bad-bg: #3a1a1d;
  --chat-bg: #1c1926;
  --bubble-customer: #2a2637;
  --bubble-dan: var(--tint);
  --focus: var(--brand);
  --shadow-card: 0 1px 2px rgba(0,0,0,.4);
  --shadow-bubble: none;
  --shadow-nav: 0 -1px 0 #332e42;
  /* WhatsApp's own dark-mode colours */
  --wa-wallpaper: #0b141a;
  --wa-header: #202c33;
  --wa-on-header: #e9edef;
  --wa-on-header-muted: #8696a0;
  --wa-avatar: #6a7175;
  --wa-avatar-ink: #cfd4d6;
  --wa-bubble-in: #202c33;
  --wa-bubble-out: #005c4b;
  --wa-ink: #e9edef;
  --wa-meta: #8696a0;
  --wa-link: #53bdeb;
  --wa-line: #2a3942;
  --wa-hover: #182229;
  --wa-shadow: rgba(0,0,0,.3);
  --wa-media-ink: #aebac1;
  --wa-sys: #182229;
  --wa-green: #00a884;
  --wa-img-bg: #2a3942;
}

/* Type styles */
.t-display { font-family: var(--font-display); font-size: 40px; line-height: 44px; font-weight: 600; letter-spacing: -0.02em; }
.t-h1 { font-family: var(--font-display); font-size: 28px; line-height: 34px; font-weight: 600; letter-spacing: -0.01em; }
.t-h2 { font-family: var(--font-display); font-size: 22px; line-height: 28px; font-weight: 600; }
.t-numeral { font-family: var(--font-display); font-size: 30px; line-height: 34px; font-weight: 600; }
.t-h3 { font-family: var(--font-sans); font-size: 16px; line-height: 22px; font-weight: 600; }
.t-body { font-family: var(--font-sans); font-size: 15px; line-height: 22px; font-weight: 400; }
.t-body-sm { font-family: var(--font-sans); font-size: 13px; line-height: 18px; font-weight: 400; }
.t-label { font-family: var(--font-sans); font-size: 13px; line-height: 18px; font-weight: 600; }
.t-button { font-family: var(--font-sans); font-size: 15px; line-height: 20px; font-weight: 600; }
.t-caption { font-family: var(--font-sans); font-size: 12px; line-height: 16px; font-weight: 500; }
.t-overline { font-family: var(--font-sans); font-size: 11px; line-height: 14px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }