/* Foyer design tokens — GENERATED by agent/tokens/build.py. Do not edit. */
/* Light is the default. Dark applies via [data-theme="dark"] or the OS preference
   when the document opts in with [data-theme="auto"]. Sections that are always
   dark regardless of theme use .on-dark. */

:root {
  /* ---- primitives (do not reference these in product code) ---- */
  --disposition-blocked: #B33B30;
  --disposition-blocked-on: #F0776A;
  --disposition-blocked-tint: #FBE9E7;
  --disposition-review: #6E56CF;
  --disposition-review-on: #A08CF0;
  --disposition-review-tint: #EDE9FB;
  --disposition-through: #17803F;
  --disposition-through-on: #5CC98A;
  --disposition-through-tint: #ECF7F0;
  --disposition-voicemail: #2C64A8;
  --disposition-voicemail-on: #7FB0EC;
  --disposition-voicemail-tint: #E8F0FA;
  --green-100: #DAE7DF;
  --green-200: #B4CFBF;
  --green-300: #85B098;
  --green-400: #558D70;
  --green-50: #F0F5F2;
  --green-500: #2F6B4E;
  --green-600: #1E5340;
  --green-700: #163D2F;
  --green-800: #14231D;
  --green-900: #0A1611;
  --green-950: #0B0F0D;
  --harbor-500: #3A72B8;
  --harbor-600: #2C64A8;
  --neutral-0: #FFFFFF;
  --neutral-100: #F4F6F1;
  --neutral-200: #E8EBE6;
  --neutral-300: #D7DCD5;
  --neutral-400: #B4BCB3;
  --neutral-50: #FAFBF9;
  --neutral-500: #8B958A;
  --neutral-600: #6B776E;
  --neutral-700: #4A554D;
  --neutral-800: #333C36;
  --neutral-900: #1F2622;
  --on-dark-glass: #CBD5CD;
  --on-dark-muted: #B8C2B9;
  --on-dark-strong: #FFFFFF;
  --on-dark-subtle: #9AA79D;
  --status-danger: #B33B30;
  --status-info: #1F7A7A;
  --status-success: #17803F;
  --status-warning: #96610A;
  --volt-100: #F3FFCC;
  --volt-200: #EAFFA3;
  --volt-300: #E1FF70;
  --volt-400: #DCFF52;
  --volt-50: #FAFFEB;
  --volt-500: #D9FF3B;
  --volt-600: #C2E82B;
  --volt-700: #9CBC1C;
  --volt-800: #748C15;
  --volt-900: #4C5C10;

  /* ---- semantic: light ---- */
  --bg-accent: #D9FF3B;
  --bg-accent-pressed: #C2E82B;
  --bg-call-header: #F4F6F1;
  --bg-canvas: #FFFFFF;
  --bg-grouped: #F4F6F1;
  --bg-hold: #1E5340;
  --bg-hold-chrome: #1E5340;
  --bg-inverse: #0A1611;
  --bg-live: #17803F;
  --bg-live-ended: #4A554D;
  --bg-live-voicemail: #2C64A8;
  --bg-message-caller: #F4F6F1;
  --bg-message-host: #E8EBE6;
  --bg-message-owner: #0B0F0D;
  --bg-raised: #FFFFFF;
  --bg-subtle: #F4F6F1;
  --bg-sunken: #E8EBE6;
  --border-default: rgba(11,15,13,0.14);
  --border-focus: #0B0F0D;
  --border-strong: rgba(11,15,13,0.28);
  --border-subtle: rgba(11,15,13,0.10);
  --bubble-caller-fill: #F4F6F1;
  --bubble-owner-fill: #17803F;
  --bubble-owner-text: #FFFFFF;
  --control-call-secondary-fill: #FFFFFF;
  --control-call-secondary-ink: #0B0F0D;
  --control-call-selected-fill: #0B0F0D;
  --control-call-selected-ink: #FFFFFF;
  --control-choice-mark: #0B0F0D;
  --control-slider-track: #0B0F0D;
  --control-switch-knob-off: #6B776E;
  --control-switch-knob-on: #FFFFFF;
  --control-switch-off-track: #D7DCD5;
  --control-switch-on-track: #17803F;
  --navigation-pill: #E8EBE6;
  --surface-glass-border: rgba(11,15,13,0.10);
  --surface-glass-fill: rgba(255,255,255,0.90);
  --surface-glass-fill-inset: rgba(244,246,241,0.78);
  --text-danger: #B33B30;
  --text-hold: #1E5340;
  --text-inverse: #FFFFFF;
  --text-on-accent: #0B0F0D;
  --text-on-call-header: #0B0F0D;
  --text-on-hold: #FFFFFF;
  --text-on-live: #FFFFFF;
  --text-on-message-owner: #FFFFFF;
  --text-primary: #0B0F0D;
  --text-secondary: #4A554D;
  --text-tertiary: #6B776E;

  /* ---- scrims ---- */
  --scrim-modal: rgba(11,15,13,0.55);
  --scrim-photo-desktop: rgba(10,22,17,0.80);
  --scrim-photo-stacked: rgba(10,22,17,0.87);

  /* ---- system ---- */
  --breakpoint-lg: 1100px;
  --breakpoint-md: 760px;
  --breakpoint-sm: 480px;
  --breakpoint-xl: 1440px;
  --component-avatar-lg: 64px;
  --component-avatar-md: 40px;
  --component-avatar-radius: var(--radius-pill);
  --component-avatar-sm: 28px;
  --component-brand-mark-web: 34px;
  --component-brand-wordmark-web-size: 30px;
  --component-brand-wordmark-web-tracking: -0.021em;
  --component-button-border-width: 1.5px;
  --component-button-disabled-opacity: 0.38;
  --component-button-gap: var(--space-3);
  --component-button-min-height: 48px;
  --component-button-min-height-sm: 44px;
  --component-button-padding-x: var(--space-7);
  --component-button-padding-xsm: var(--space-5);
  --component-button-padding-y: var(--space-4);
  --component-button-padding-ysm: var(--space-3);
  --component-button-primary-bg: var(--bg-accent);
  --component-button-primary-bg-pressed: var(--bg-accent-pressed);
  --component-button-primary-text: var(--text-on-accent);
  --component-button-radius: var(--radius-pill);
  --component-call-card-control-gap: var(--space-5);
  --component-call-card-control-size: 52px;
  --component-call-card-grabber-height: 5px;
  --component-call-card-grabber-width: 134px;
  --component-call-surface-avatar-size: 112px;
  --component-call-surface-control-border: var(--border-strong);
  --component-call-surface-header-bg: var(--bg-call-header);
  --component-call-surface-header-ink: var(--text-on-call-header);
  --component-call-surface-primary-fill: var(--bg-accent);
  --component-call-surface-primary-ink: var(--text-on-accent);
  --component-call-surface-scroll-threshold: 400px;
  --component-call-surface-secondary-fill: var(--control-call-secondary-fill);
  --component-call-surface-secondary-ink: var(--control-call-secondary-ink);
  --component-call-surface-selected-fill: var(--control-call-selected-fill);
  --component-call-surface-selected-ink: var(--control-call-selected-ink);
  --component-card-border-width: 1px;
  --component-card-gap: var(--space-5);
  --component-card-padding: var(--space-7);
  --component-card-padding-compact: var(--space-5);
  --component-card-radius-ios: var(--radius-lg);
  --component-card-radius-web: var(--radius-sm);
  --component-chip-dot-size: 6px;
  --component-chip-gap: var(--space-2);
  --component-chip-min-height: 22px;
  --component-chip-padding-x: var(--space-3);
  --component-chip-padding-y: var(--space-1);
  --component-chip-radius: var(--radius-pill);
  --component-field-background: var(--bg-subtle);
  --component-field-border-width: 1px;
  --component-field-focus-ring-offset: 2px;
  --component-field-focus-ring-width: 2px;
  --component-field-min-height: 52px;
  --component-field-padding-x: var(--space-5);
  --component-field-radius: var(--radius-md);
  --component-invite-pie-inset: 3px;
  --component-invite-pie-size: 20px;
  --component-keypad-asterisk-offset: 7px;
  --component-keypad-bottom-inset: 60px;
  --component-keypad-call-icon-size: 32px;
  --component-keypad-call-size: var(--component-keypad-key-size);
  --component-keypad-digit-max-size: 44px;
  --component-keypad-digit-size: 40px;
  --component-keypad-key-max-size: 96px;
  --component-keypad-key-size: 88px;
  --component-keypad-letter-max-size: 12px;
  --component-keypad-letter-size: 10px;
  --component-keypad-match-height: 104px;
  --component-keypad-row-gap: 20px;
  --component-layout-content-max-web: 1160px;
  --component-layout-gutter-ios: var(--space-5);
  --component-layout-gutter-web: var(--space-8);
  --component-layout-marketing-nav-web: 76px;
  --component-layout-metadata-rail-web: 320px;
  --component-layout-reading-max: 68ch;
  --component-layout-sidebar-collapsed-web: 64px;
  --component-layout-sidebar-web: 240px;
  --component-layout-tap-target-ios: 44px;
  --component-list-row-avatar-size: 40px;
  --component-list-row-gap: var(--space-4);
  --component-list-row-min-height: 72px;
  --component-list-row-padding-x: var(--space-5);
  --component-list-row-padding-y: var(--space-4);
  --component-list-row-rail-width: 3px;
  --component-list-row-separator-inset: 60px;
  --component-list-row-voicemail-glyph-width-scale: 0.88;
  --component-my-numbers-glyph-dot-radius: 0.15;
  --component-my-numbers-glyph-dot-x: 0.76;
  --component-my-numbers-glyph-gap: 0.08;
  --component-my-numbers-glyph-head-angle: 0.6;
  --component-my-numbers-glyph-head-length: 0.22;
  --component-my-numbers-glyph-inset: 0.12;
  --component-my-numbers-glyph-stroke-width: 0.09;
  --component-nav-bar-height: 56px;
  --component-nav-bar-height-large: 104px;
  --component-nav-bar-padding-x: var(--space-5);
  --component-scroll-cue-height-fraction: 0.15;
  --component-scroll-cue-size-scale: 0.5;
  --component-section-header-padding-x: var(--space-5);
  --component-section-header-space-above: var(--space-8);
  --component-section-header-space-below: var(--space-4);
  --component-sheet-grabber-height: 5px;
  --component-sheet-grabber-width: 36px;
  --component-sheet-padding: var(--space-7);
  --component-sheet-radius: var(--radius-xl);
  --component-tab-bar-glass-fade-opacity: 0.55;
  --component-tab-bar-height: 56px;
  --component-tab-bar-icon-size: 22px;
  --component-tab-bar-max-items: 4;
  --component-transcript-gap: var(--space-4);
  --component-transcript-max-width: 62ch;
  --component-transcript-padding: var(--space-5);
  --component-transcript-radius: var(--radius-md);
  --component-transcript-speaker-gap: var(--space-2);
  --elevation-light-lg: 0 30px 68px -36px rgba(11,15,13,0.40);
  --elevation-light-md: 0 8px 24px -12px rgba(11,15,13,0.22);
  --elevation-light-photo: 0 34px 44px rgba(11,15,13,0.22);
  --elevation-light-sm: 0 1px 2px rgba(11,15,13,0.06);
  --font-family-display: Archivo, system-ui, sans-serif;
  --font-family-text: Manrope, system-ui, sans-serif;
  --font-weight-black: 800;
  --font-weight-bold: 700;
  --font-weight-medium: 500;
  --font-weight-regular: 400;
  --motion-duration-base: 240ms;
  --motion-duration-fast: 160ms;
  --motion-duration-instant: 100ms;
  --motion-duration-slow: 400ms;
  --motion-easing-enter: cubic-bezier(0, 0, 0, 1);
  --motion-easing-exit: cubic-bezier(0.3, 0, 1, 1);
  --motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --radius-lg: 16px;
  --radius-md: 10px;
  --radius-none: 0px;
  --radius-pill: 999px;
  --radius-sm: 6px;
  --radius-xl: 22px;
  --radius-xs: 4px;
  --space-0: 0px;
  --space-1: 2px;
  --space-10: 48px;
  --space-11: 64px;
  --space-12: 80px;
  --space-13: 96px;
  --space-14: 128px;
  --space-2: 4px;
  --space-3: 8px;
  --space-4: 12px;
  --space-5: 16px;
  --space-6: 20px;
  --space-7: 24px;
  --space-8: 32px;
  --space-9: 40px;
  --target-ios: 44px;
  --target-web: 24px;
  --z-index-base: 0;
  --z-index-modal: 300;
  --z-index-overlay: 200;
  --z-index-raised: 10;
  --z-index-sticky: 100;
  --z-index-toast: 400;

  /* ---- type ---- */
  --type-body-lg-family: Manrope, system-ui, sans-serif;
  --type-body-lg-leading: 1.55;
  --type-body-lg-size: 18px;
  --type-body-lg-weight: 400;
  --type-body-md-family: Manrope, system-ui, sans-serif;
  --type-body-md-leading: 1.55;
  --type-body-md-size: 15.5px;
  --type-body-md-weight: 400;
  --type-body-sm-family: Manrope, system-ui, sans-serif;
  --type-body-sm-leading: 1.5;
  --type-body-sm-size: 13.5px;
  --type-body-sm-weight: 400;
  --type-body-xs-family: Manrope, system-ui, sans-serif;
  --type-body-xs-leading: 1.45;
  --type-body-xs-size: 13px;
  --type-body-xs-weight: 400;
  --type-display-lg-family: Archivo, system-ui, sans-serif;
  --type-display-lg-leading: 1.04;
  --type-display-lg-size: 48px;
  --type-display-lg-tracking: -0.028em;
  --type-display-lg-weight: 800;
  --type-display-md-family: Archivo, system-ui, sans-serif;
  --type-display-md-leading: 1.08;
  --type-display-md-size: 36px;
  --type-display-md-tracking: -0.024em;
  --type-display-md-weight: 800;
  --type-display-sm-family: Archivo, system-ui, sans-serif;
  --type-display-sm-leading: 1.12;
  --type-display-sm-size: 28px;
  --type-display-sm-tracking: -0.02em;
  --type-display-sm-weight: 800;
  --type-display-xl-family: Archivo, system-ui, sans-serif;
  --type-display-xl-leading: 1.02;
  --type-display-xl-size: 64px;
  --type-display-xl-tracking: -0.03em;
  --type-display-xl-weight: 800;
  --type-heading-lg-family: Archivo, system-ui, sans-serif;
  --type-heading-lg-leading: 1.2;
  --type-heading-lg-size: 22px;
  --type-heading-lg-tracking: -0.015em;
  --type-heading-lg-weight: 700;
  --type-heading-md-family: Archivo, system-ui, sans-serif;
  --type-heading-md-leading: 1.25;
  --type-heading-md-size: 18px;
  --type-heading-md-tracking: -0.01em;
  --type-heading-md-weight: 700;
  --type-heading-sm-family: Manrope, system-ui, sans-serif;
  --type-heading-sm-leading: 1.3;
  --type-heading-sm-size: 16px;
  --type-heading-sm-tracking: -0.005em;
  --type-heading-sm-weight: 700;
  --type-label-lg-family: Manrope, system-ui, sans-serif;
  --type-label-lg-leading: 1.3;
  --type-label-lg-size: 13px;
  --type-label-lg-weight: 700;
  --type-label-md-family: Manrope, system-ui, sans-serif;
  --type-label-md-leading: 1.2;
  --type-label-md-size: 11px;
  --type-label-md-tracking: 0.16em;
  --type-label-md-weight: 800;
  --type-label-sm-family: Manrope, system-ui, sans-serif;
  --type-label-sm-leading: 1.2;
  --type-label-sm-size: 10px;
  --type-label-sm-tracking: 0.20em;
  --type-label-sm-weight: 800;
}

[data-theme="dark"],
.on-dark {
  --bg-accent: #D9FF3B;
  --bg-accent-pressed: #C2E82B;
  --bg-call-header: #14231D;
  --bg-canvas: #0A1611;
  --bg-grouped: #0A1611;
  --bg-hold: #17803F;
  --bg-hold-chrome: #1E5340;
  --bg-inverse: #FFFFFF;
  --bg-live: #17803F;
  --bg-live-ended: #4A554D;
  --bg-live-voicemail: #3A72B8;
  --bg-message-caller: #14231D;
  --bg-message-host: #333C36;
  --bg-message-owner: #FFFFFF;
  --bg-raised: #14231D;
  --bg-subtle: #14231D;
  --bg-sunken: #0B0F0D;
  --border-default: rgba(255,255,255,0.14);
  --border-focus: #D9FF3B;
  --border-strong: rgba(255,255,255,0.28);
  --border-subtle: rgba(255,255,255,0.10);
  --bubble-caller-fill: #14231D;
  --bubble-owner-fill: #17803F;
  --bubble-owner-text: #FFFFFF;
  --control-call-secondary-fill: #14231D;
  --control-call-secondary-ink: #FFFFFF;
  --control-call-selected-fill: #FFFFFF;
  --control-call-selected-ink: #0A1611;
  --control-choice-mark: #FFFFFF;
  --control-slider-track: #FFFFFF;
  --control-switch-knob-off: #9AA79D;
  --control-switch-knob-on: #FFFFFF;
  --control-switch-off-track: #0B0F0D;
  --control-switch-on-track: #17803F;
  --navigation-pill: #14231D;
  --surface-glass-border: rgba(255,255,255,0.22);
  --surface-glass-fill: rgba(255,255,255,0.07);
  --surface-glass-fill-inset: rgba(10,22,17,0.42);
  --text-danger: #F0776A;
  --text-hold: #5CC98A;
  --text-inverse: #0B0F0D;
  --text-on-accent: #0B0F0D;
  --text-on-call-header: #FFFFFF;
  --text-on-hold: #FFFFFF;
  --text-on-live: #FFFFFF;
  --text-on-message-owner: #0A1611;
  --text-primary: #FFFFFF;
  --text-secondary: #B8C2B9;
  --text-tertiary: #9AA79D;
}

@media (prefers-color-scheme: dark) {
  [data-theme="auto"] {
    --bg-accent: #D9FF3B;
    --bg-accent-pressed: #C2E82B;
    --bg-call-header: #14231D;
    --bg-canvas: #0A1611;
    --bg-grouped: #0A1611;
    --bg-hold: #17803F;
    --bg-hold-chrome: #1E5340;
    --bg-inverse: #FFFFFF;
    --bg-live: #17803F;
    --bg-live-ended: #4A554D;
    --bg-live-voicemail: #3A72B8;
    --bg-message-caller: #14231D;
    --bg-message-host: #333C36;
    --bg-message-owner: #FFFFFF;
    --bg-raised: #14231D;
    --bg-subtle: #14231D;
    --bg-sunken: #0B0F0D;
    --border-default: rgba(255,255,255,0.14);
    --border-focus: #D9FF3B;
    --border-strong: rgba(255,255,255,0.28);
    --border-subtle: rgba(255,255,255,0.10);
    --bubble-caller-fill: #14231D;
    --bubble-owner-fill: #17803F;
    --bubble-owner-text: #FFFFFF;
    --control-call-secondary-fill: #14231D;
    --control-call-secondary-ink: #FFFFFF;
    --control-call-selected-fill: #FFFFFF;
    --control-call-selected-ink: #0A1611;
    --control-choice-mark: #FFFFFF;
    --control-slider-track: #FFFFFF;
    --control-switch-knob-off: #9AA79D;
    --control-switch-knob-on: #FFFFFF;
    --control-switch-off-track: #0B0F0D;
    --control-switch-on-track: #17803F;
    --navigation-pill: #14231D;
    --surface-glass-border: rgba(255,255,255,0.22);
    --surface-glass-fill: rgba(255,255,255,0.07);
    --surface-glass-fill-inset: rgba(10,22,17,0.42);
    --text-danger: #F0776A;
    --text-hold: #5CC98A;
    --text-inverse: #0B0F0D;
    --text-on-accent: #0B0F0D;
    --text-on-call-header: #FFFFFF;
    --text-on-hold: #FFFFFF;
    --text-on-live: #FFFFFF;
    --text-on-message-owner: #0A1611;
    --text-primary: #FFFFFF;
    --text-secondary: #B8C2B9;
    --text-tertiary: #9AA79D;
  }
}

/* Dark surfaces get no shadow — elevation is border + fill lift. */
.on-dark { --elevation-light-sm: none; --elevation-light-md: none; --elevation-light-lg: none; }

/* ---- type utilities ---- */
.t-type-body-lg {
  font-family: var(--type-body-lg-family);
  font-size: var(--type-body-lg-size);
  font-weight: var(--type-body-lg-weight);
  line-height: var(--type-body-lg-leading);
}
.t-type-body-md {
  font-family: var(--type-body-md-family);
  font-size: var(--type-body-md-size);
  font-weight: var(--type-body-md-weight);
  line-height: var(--type-body-md-leading);
}
.t-type-body-sm {
  font-family: var(--type-body-sm-family);
  font-size: var(--type-body-sm-size);
  font-weight: var(--type-body-sm-weight);
  line-height: var(--type-body-sm-leading);
}
.t-type-body-xs {
  font-family: var(--type-body-xs-family);
  font-size: var(--type-body-xs-size);
  font-weight: var(--type-body-xs-weight);
  line-height: var(--type-body-xs-leading);
}
.t-type-display-lg {
  font-family: var(--type-display-lg-family);
  font-size: var(--type-display-lg-size);
  font-weight: var(--type-display-lg-weight);
  line-height: var(--type-display-lg-leading);
  letter-spacing: var(--type-display-lg-tracking);
}
.t-type-display-md {
  font-family: var(--type-display-md-family);
  font-size: var(--type-display-md-size);
  font-weight: var(--type-display-md-weight);
  line-height: var(--type-display-md-leading);
  letter-spacing: var(--type-display-md-tracking);
}
.t-type-display-sm {
  font-family: var(--type-display-sm-family);
  font-size: var(--type-display-sm-size);
  font-weight: var(--type-display-sm-weight);
  line-height: var(--type-display-sm-leading);
  letter-spacing: var(--type-display-sm-tracking);
}
.t-type-display-xl {
  font-family: var(--type-display-xl-family);
  font-size: var(--type-display-xl-size);
  font-weight: var(--type-display-xl-weight);
  line-height: var(--type-display-xl-leading);
  letter-spacing: var(--type-display-xl-tracking);
}
.t-type-heading-lg {
  font-family: var(--type-heading-lg-family);
  font-size: var(--type-heading-lg-size);
  font-weight: var(--type-heading-lg-weight);
  line-height: var(--type-heading-lg-leading);
  letter-spacing: var(--type-heading-lg-tracking);
}
.t-type-heading-md {
  font-family: var(--type-heading-md-family);
  font-size: var(--type-heading-md-size);
  font-weight: var(--type-heading-md-weight);
  line-height: var(--type-heading-md-leading);
  letter-spacing: var(--type-heading-md-tracking);
}
.t-type-heading-sm {
  font-family: var(--type-heading-sm-family);
  font-size: var(--type-heading-sm-size);
  font-weight: var(--type-heading-sm-weight);
  line-height: var(--type-heading-sm-leading);
  letter-spacing: var(--type-heading-sm-tracking);
}
.t-type-label-lg {
  font-family: var(--type-label-lg-family);
  font-size: var(--type-label-lg-size);
  font-weight: var(--type-label-lg-weight);
  line-height: var(--type-label-lg-leading);
}
.t-type-label-md {
  font-family: var(--type-label-md-family);
  font-size: var(--type-label-md-size);
  font-weight: var(--type-label-md-weight);
  line-height: var(--type-label-md-leading);
  letter-spacing: var(--type-label-md-tracking);
  text-transform: uppercase;
}
.t-type-label-sm {
  font-family: var(--type-label-sm-family);
  font-size: var(--type-label-sm-size);
  font-weight: var(--type-label-sm-weight);
  line-height: var(--type-label-sm-leading);
  letter-spacing: var(--type-label-sm-tracking);
  text-transform: uppercase;
}

/* ---- reduced motion is not optional ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}