/*
 * Hyperchat design tokens: the one source of colour, type, radius and spacing.
 * Loaded by every layout (admin app, account pages, sign-in). Older stylesheets
 * (custom.css, jetstream.css, the sign-in layout) only alias these values.
 *
 * Contrast, measured with the design kit's contrast.py:
 *   white on --hc-primary 7.60:1, on hover 9.81:1, on press 12.57:1
 *   --hc-primary on white 7.60:1, on --hc-bg 7.13:1, on --hc-primary-soft 6.46:1
 *   --hc-ink on white 16.72:1, --hc-muted on white 6.58:1, on --hc-surface-2 5.87:1
 *   --hc-input-border on white 3.45:1 (form controls need 3:1)
 *   --hc-nav-text on --hc-nav-bg 9.97:1, --hc-brand on --hc-nav-bg 6.39:1
 *   danger 6.57:1, warning text on its tint 6.10:1, success on its tint 4.57:1, info on its tint 4.65:1
 */
:root {
  /* Brand: the official Hyperchat teal and its deep shade for fills and text on light surfaces */
  --hc-brand: #4DAA94;
  --hc-primary: #0E5E59;
  --hc-primary-hover: #0B4C48;
  --hc-primary-press: #083A37;
  --hc-primary-soft: #E0F0EE;
  --hc-on-primary: #FFFFFF;
  /* Secondary text on a --hc-primary fill (6.04:1) */
  --hc-on-primary-2: #D3EAE6;

  /* Neutrals, tinted toward the brand */
  --hc-bg: #F6F8F8;
  --hc-surface: #FFFFFF;
  --hc-surface-2: #EEF3F2;
  --hc-ink: #14201F;
  --hc-ink-2: #3B4442;
  --hc-muted: #52605E;
  --hc-line: #DDE5E4;
  --hc-line-strong: #C5D0CE;
  --hc-input-border: #7F8D8B;

  /* Status: each fill carries white text, each text colour reads on its own tint */
  --hc-success: #15803D;
  --hc-success-hover: #166534;
  --hc-success-soft: #DCFCE7;
  --hc-warning: #8A4B00;
  --hc-warning-hover: #6F3C00;
  --hc-warning-soft: #FDF1E1;
  --hc-danger: #B42318;
  --hc-danger-hover: #912018;
  --hc-danger-soft: #FDECEA;
  --hc-info: #0E7490;
  --hc-info-hover: #155E75;
  --hc-info-soft: #E0F2F7;
  --hc-ai: #7C3AED;
  --hc-ai-soft: #F3E8FF;

  /* WhatsApp message previews: the chat wallpaper behind white bubbles, and button text in a bubble */
  --hc-wa-wallpaper: #E6DDD4;
  --hc-wa-button: var(--hc-info);

  /* Dark surfaces: the sidebar and the sign-in screens share one teal-tinted family
     (--hc-dark-text-muted on --hc-dark-surface 6.55:1, --hc-on-brand on --hc-brand 6.81:1) */
  --hc-dark-bg-deep: #050909;
  --hc-dark-bg: #0A1110;
  --hc-dark-surface: #0F1918;
  --hc-dark-surface-2: #162321;
  --hc-dark-raised: #1C2A28;
  --hc-dark-text: #F1F5F4;
  --hc-dark-text-2: #B7C4C2;
  --hc-dark-text-muted: #8FA09D;
  --hc-dark-line: rgba(183, 196, 194, 0.14);
  --hc-brand-hover: #62BCA7;
  --hc-brand-tint: rgba(77, 170, 148, 0.16);
  --hc-on-brand: #0A1110;

  /* Dark navigation (sidebar) */
  --hc-nav-bg: var(--hc-dark-surface);
  --hc-nav-bg-alt: var(--hc-dark-surface-2);
  --hc-nav-text: var(--hc-dark-text-2);
  --hc-nav-text-active: #FFFFFF;
  --hc-nav-active-bg: var(--hc-dark-raised);
  --hc-nav-hover-bg: #172422;

  /* Keyboard focus */
  --hc-focus: #0E5E59;
  --hc-focus-on-dark: #7FD6CA;

  /* Type */
  --hc-font: 'Instrument Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --hc-text-xs: 0.75rem;
  --hc-text-sm: 0.8125rem;
  --hc-text-md: 0.9375rem;
  --hc-text-lg: 1.0625rem;
  --hc-text-xl: 1.375rem;
  --hc-text-2xl: 1.75rem;
  --hc-text-3xl: 2.125rem;
  --hc-text-display: 2.75rem;

  /* Shape and space (4px rhythm) */
  --hc-radius-xs: 6px;
  --hc-radius-sm: 10px;
  --hc-radius-md: 12px;
  --hc-radius-lg: 16px;
  --hc-radius-xl: 20px;
  --hc-radius-pill: 999px;
  --hc-space-1: 4px;
  --hc-space-2: 8px;
  --hc-space-3: 12px;
  --hc-space-4: 16px;
  --hc-space-5: 24px;
  --hc-space-6: 32px;
  --hc-space-7: 48px;

  /* In-between steps of the 4px rhythm, for tight rows and chips */
  --hc-space-0: 2px;
  --hc-space-1-5: 6px;
  --hc-space-2-5: 10px;
  --hc-space-3-5: 14px;
  --hc-radius-2xs: 4px;
  --hc-radius-bubble: 4px 14px 14px 14px;
  --hc-text-2xs: 0.6875rem;

  /* Sizes of controls and the things inside them */
  --hc-target: 44px;
  --hc-target-sm: 36px;
  --hc-control-h: 40px;
  --hc-tabline-h: 46px;
  --hc-border-strong-w: 1.5px;
  --hc-focus-w: 2px;
  --hc-focus-offset: 2px;
  --hc-avatar-sm: 36px;
  --hc-avatar-md: 44px;
  --hc-avatar-lg: 64px;
  --hc-icon-tile: 40px;
  --hc-empty-icon: 56px;
  --hc-count-min: 20px;
  --hc-progress-h: 8px;
  --hc-preview-media-h: 160px;

  /* Layout: page width, and the widths at which columns wrap onto their own row */
  --hc-screen-max: 1440px;
  --hc-head-basis: 320px;
  --hc-split-main-basis: 560px;
  --hc-split-side-basis: 300px;
  --hc-card-min: 260px;
  --hc-stat-min: 150px;
  --hc-detail-label-min: 96px;

  /* App shell measurements */
  --hc-topbar-h: 56px;
  --hc-bottombar-h: 64px;
  --hc-tab-min-h: 56px;
  --hc-fab-size: 52px;
  --hc-fab-lift: -22px;
  --hc-icon-md: 22px;
  --hc-rail-w: 84px;
  --hc-rail-open-w: 250px;
  --hc-motion-fast: 150ms;

  /* Elevation: most surfaces are flat; these are for menus, sheets and dialogs */
  --hc-shadow-xs: 0 1px 2px rgba(20, 32, 31, 0.05);
  --hc-shadow-md: 0 4px 12px rgba(20, 32, 31, 0.08);
  --hc-shadow-lg: 0 12px 32px rgba(20, 32, 31, 0.14);
  /* Behind sheets and dialogs */
  --hc-scrim: rgba(20, 32, 31, 0.45);
  --hc-ring: 0 0 0 4px rgba(14, 94, 89, 0.14);
}