/* Every visual constant of the wwassembler.com console. console.css uses only these. */
:root {
  /* Ink and surfaces: cool slate neutrals */
  --color-page: #f5f7fb;
  --color-page-deep: #eef1f7;
  --color-surface: #ffffff;
  --color-surface-raised: #fbfcfe;
  --color-surface-sunken: #f1f4f9;
  --color-text: #0e1726;
  --color-text-soft: #334155;
  --color-text-muted: #64748b;
  --color-text-faint: #94a3b8;
  --color-border: #e3e8f0;
  --color-border-strong: #cdd5e1;
  --color-hairline: #edf1f6;

  /* Welcome Wagon red, read from their logo (site/images/welcome-wagon-logo-red.png) */
  --color-brand: #da291c;
  --color-brand-bright: #ec3a2b;
  --color-brand-deep: #b81f14;
  --color-brand-text: #ffffff;
  --color-brand-tint: #fdeeec;
  --color-brand-tint-strong: #fbdcd8;
  --color-brand-ring: rgba(218, 41, 28, 0.18);

  /* The cool accent: indigo, for focus and running work */
  --color-accent: #4f5bd5;
  --color-accent-tint: #eef0ff;
  --color-accent-ring: rgba(79, 91, 213, 0.22);

  /* Statuses: a tint to sit on and a strong color for text and the dot */
  --color-success: #0f8a5f;
  --color-success-tint: #e7f6ef;
  --color-warning: #a8650a;
  --color-warning-tint: #fff4e0;
  --color-danger: #c8281c;
  --color-danger-tint: #fdecea;
  --color-info: #3d4bc7;
  --color-info-tint: #eceeff;
  --color-neutral: #5b6779;
  --color-neutral-tint: #eef1f6;
  --color-success-line: rgba(15, 138, 95, 0.22);
  --color-warning-line: rgba(168, 101, 10, 0.24);
  --color-danger-line: rgba(200, 40, 28, 0.22);
  --color-info-line: rgba(61, 75, 199, 0.22);
  --color-teal: #0f7f8f;
  --color-teal-tint: #e3f5f7;

  --color-focus: #4f5bd5;
  --color-disabled: #c5cdd9;
  --color-disabled-text: #f7f9fc;
  --color-overlay: rgba(14, 23, 38, 0.04);
  --color-qr: #0e1726;
  --color-qr-background: #ffffff;

  /* Font */
  --font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", "Inter", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-family-display: ui-sans-serif, -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI Variable Display", "Segoe UI", "Inter", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-family-mono: ui-monospace, "SF Mono", "SFMono-Regular", "Cascadia Mono", Menlo, Consolas, monospace;
  --font-size-micro: 0.6875rem;
  --font-size-small: 0.8125rem;
  --font-size-base: 0.9375rem;
  --font-size-lead: 1rem;
  --font-size-h3: 1rem;
  --font-size-h2: 1.125rem;
  --font-size-h1: 1.75rem;
  --font-size-code: 1.625rem;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 600;
  --font-weight-heavy: 700;
  --line-height: 1.55;
  --line-height-tight: 1.2;
  --letter-spacing-tight: -0.02em;
  --letter-spacing-caps: 0.08em;
  --letter-spacing-code: 0.35em;

  /* Spacing */
  --space-0: 0.125rem;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;

  /* Sizes */
  --sidebar-width: 16.5rem;
  --sign-in-width: 27rem;
  --form-width: 36rem;
  --content-max: 76rem;
  --control-height: 2.75rem;
  --control-height-small: 2rem;
  --border-width: 1px;
  --border-width-strong: 2px;
  --focus-width: 3px;
  --qr-size: 11rem;
  --logo-height: 1.875rem;
  --logo-height-signed-out: 2.5rem;
  --icon-size: 1.125rem;
  --icon-size-large: 1.5rem;
  --icon-tile: 2.5rem;
  --icon-hero: 3.5rem;
  --avatar-size: 2.25rem;
  --dot-size: 0.4375rem;
  --rule-size: 0.25rem;
  --progress-height: 0.3125rem;
  --visually-hidden-size: 1px;
  --nudge: -1px;
  --nudge-x: 0.1875rem;
  --card-min: 22rem;
  --tile-min: 15rem;
  --step-name-width: 4.75rem;
  --folder-min: 12rem;
  --input-money-width: 8rem;
  --pill-height: 1.5rem;
  --avatar-size-small: 2rem;
  --step-number-size: 1.375rem;
  --menu-indicator-width: 0.1875rem;
  --spinner-width: 2px;
  --rise: 0.5rem;
  --pulse-spread: 0.375rem;

  /* The one breakpoint is written in the media queries (CSS cannot use custom properties there): the
     sidebar from 60rem. */

  /* Radii */
  --radius-small: 0.5rem;
  --radius: 0.75rem;
  --radius-large: 1rem;
  --radius-xl: 1.375rem;
  --radius-pill: 62.5rem;

  /* Shadows */
  --shadow-hairline: 0 1px 0 rgba(14, 23, 38, 0.04);
  --shadow-surface: 0 1px 2px rgba(14, 23, 38, 0.04), 0 4px 16px rgba(14, 23, 38, 0.04);
  --shadow-raised: 0 2px 4px rgba(14, 23, 38, 0.05), 0 12px 32px rgba(14, 23, 38, 0.08);
  --shadow-float: 0 24px 64px rgba(11, 17, 32, 0.22), 0 4px 12px rgba(11, 17, 32, 0.08);
  --shadow-button: 0 1px 2px rgba(184, 31, 20, 0.25), 0 4px 12px rgba(218, 41, 28, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  --shadow-button-hover: 0 2px 4px rgba(184, 31, 20, 0.28), 0 10px 24px rgba(218, 41, 28, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  --shadow-inset: inset 0 1px 2px rgba(14, 23, 38, 0.05);

  /* Motion */
  --transition-fast: 140ms cubic-bezier(0.2, 0.7, 0.2, 1);
  --transition: 220ms cubic-bezier(0.2, 0.7, 0.2, 1);
  --transition-slow: 600ms cubic-bezier(0.16, 1, 0.3, 1);
  --lift: -2px;
  --pulse-duration: 1.6s;
}