/* Copied verbatim from facely-design/tokens (colors, typography, spacing, shape).
   Do not edit here — change the design system and re-copy. */
:root {
  /* ── base palette ── */
  --blue-600: #0004E9;
  --blue-500: #4451F5;
  --blue-300: #C3C6F6;
  --blue-200: #DADBFF;
  --blue-150: #E6E6FD;
  --blue-100: #ECEDFF;
  --blue-050: #F5F6FF;
  --amber-500: #FFB801;

  --grey-000: #FFFFFF;
  --grey-050: #F5F5F5;
  --grey-100: #F0F4F7;
  --grey-150: #E4E7EA;
  --grey-200: #E5E5E5;
  --grey-250: #E0E0E0;
  --grey-300: #D9D9D9;
  --grey-400: #B5B3B3;
  --grey-450: #AEAEBE;
  --grey-500: #A7A7A7;
  --grey-550: #A4A4A4;
  --grey-600: #999999;
  --grey-650: #969696;
  --grey-700: #585954;
  --grey-800: #3F3F3F;
  --grey-900: #000000;
  --popup-border: rgba(217, 217, 227, 0.67);

  /* ── semantic: brand ── */
  --brand-primary: var(--blue-600);
  --brand-primary-hover: var(--blue-500);
  --brand-tint: var(--blue-100);
  --brand-tint-hover: var(--blue-200);
  --brand-muted: var(--blue-300);
  --accent-rating: var(--amber-500);

  /* ── semantic: surfaces ── */
  --surface-app: var(--grey-100);
  --surface-card: var(--grey-000);
  --surface-field: var(--grey-050);
  --surface-row-hover: var(--blue-050);
  --surface-control-flat: var(--grey-150);
  --surface-disabled: var(--grey-250);

  /* ── semantic: borders ── */
  --border-control: var(--blue-200);
  --border-control-hover: var(--blue-300);
  --border-divider: var(--blue-150);
  --border-popup: var(--popup-border);
  --border-field: var(--grey-200);
  --border-neutral: var(--grey-300);
  --border-tab: var(--grey-250);
  --border-secondary-btn: var(--grey-400);

  /* ── semantic: text ── */
  --text-ink: var(--grey-900);
  --text-heading: var(--grey-800);
  --text-body: var(--grey-700);
  --text-secondary: var(--grey-600);
  --text-muted: var(--grey-500);
  --text-placeholder: var(--grey-400);
  --text-control: var(--grey-450);
  --text-on-brand: var(--grey-000);
  --text-disabled: var(--grey-550);

  /* ── semantic: misc ── */
  --icon-default: var(--brand-primary);
  --icon-quiet: var(--text-muted);
  --icon-unchecked: var(--grey-650);
  --shadow-card: 0 8px 24px rgba(0, 0, 0, 0.04);
}
:root {
  --font-sans: "Open Sans", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  --weight-regular: 400;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* sizes taken verbatim from the source file — 16.8 is not a typo */
  --text-display: 34px;
  --text-title: 25px;
  --text-screen-title: 30px;
  --text-hero-body: 20px;
  --text-heading-size: 18px;
  --text-label: 16.8px;
  --text-body-size: 16px;
  --text-ui: 14px;
  --text-pill: 13px;
  --text-caption: 12px;

  --leading-tight: 1;
  --leading-snug: 1.3;
  --leading-body: 1.45;
  --leading-relaxed: 1.55;
}
:root {
  --space-1: 4px;
  --space-2: 6px;
  --space-3: 8px;
  --space-4: 10px;
  --space-5: 12px;
  --space-6: 14px;
  --space-7: 20px;
  --space-8: 24px;
  --space-9: 25px;
  --space-10: 30px;
  --space-11: 40px;

  /* recurring layout measures from the screens */
  --gap-stack: 20px;
  --gap-modal-actions: 25px;
  --pad-card: 30px;
  --pad-panel: 24px;
  --width-sidebar: 305px;
  --width-details: 330px;
  --width-modal: 561px;
  --width-auth: 560px;
  --width-app-min: 1400px;
}
:root {
  --radius-card: 20px;
  --radius-control: 10px;
  --radius-segment: 8px;
  --radius-image: 6px;
  --radius-field: 5px;
  --radius-chip: 4px;
  --radius-full: 999px;

  --border-w-popup: 1.5px;
  --border-w-control: 1.2px;
  --border-w-hairline: 0.5px;
  --border-w-tab-active: 3px;

  --h-input: 55px;
  --h-button: 50px;
  --h-dropdown: 43px;
  --h-nav-control: 44px;
  --h-segment: 40px;
  --h-tag: 34px;
  --h-pill: 30px;
  --h-switch: 26px;

  --transition-fast: 0.15s ease;
}