/* Every visual constant of the admin sites, in Pidalia's admin layout with the Mass.gov Mayflower design system's
   colors (massgov/mayflower packages/assets/scss/00-base/_color-tokens.scss at 643a843460). admin.css uses only these. */
:root {
  /* Ink and surfaces: Mayflower's grays */
  --color-page: #f2f2f2;
  --color-page-deep: #e8eef4;
  --color-surface: #ffffff;
  --color-surface-raised: #ffffff;
  --color-surface-sunken: #f2f2f2;
  --color-text: #141414;
  --color-text-soft: #535353;
  --color-text-muted: #707070;
  --color-text-faint: #cccccc;
  --color-border: #dcdcdc;
  --color-border-strong: #707070;
  --color-hairline: #f2f2f2;

  /* The brand: Mayflower's Bay Blue and its tints and shades */
  --color-brand: #14558f;
  --color-brand-bright: #2c669a;
  --color-brand-deep: #0e3c64;
  --color-brand-text: #ffffff;
  --color-brand-tint: #e8eef4;
  --color-brand-tint-strong: #d0dde9;
  --color-brand-ring: rgba(20, 85, 143, 0.18);

  /* The second accent: Mayflower's Berkshires Green */
  --color-accent: #388557;
  --color-accent-tint: #ebf3ee;
  --color-accent-ring: rgba(56, 133, 87, 0.22);

  /* Statuses: a tint to sit on and a strong color for text and the dot */
  --color-success: #388557;
  --color-success-tint: #ebf3ee;
  --color-warning: #7b630e;
  --color-warning-tint: #fef9e8;
  --color-danger: #cd0d0d;
  --color-danger-tint: #fcf3f3;
  --color-info: #14558f;
  --color-info-tint: #e8eef4;
  --color-neutral: #535353;
  --color-neutral-tint: #f2f2f2;
  --color-success-line: rgba(56, 133, 87, 0.22);
  --color-warning-line: rgba(123, 99, 14, 0.24);
  --color-danger-line: rgba(205, 13, 13, 0.22);
  --color-info-line: rgba(20, 85, 143, 0.22);
  --color-teal: #2c669a;
  --color-teal-tint: #d0dde9;
  --color-teal-line: rgba(44, 102, 154, 0.22);

  --color-focus: #3e94cf;
  --color-disabled: #cccccc;
  --color-disabled-text: #f2f2f2;
  --color-overlay: rgba(20, 20, 20, 0.04);
  --color-qr: #141414;
  --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-wordmark: 1.25rem;
  --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;
  --partner-logo-height: 4.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;
  --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;
  --step-name-width-wide: 9rem;
  --field-min: 13rem;
  --form-max: 40rem;
  --action-width: 9.5rem;
  --switch-width: 2.5rem;
  --switch-height: 1.5rem;
  --switch-thumb: 1.125rem;
  --switch-inset: 0.1875rem;
  --cell-input-width: 7rem;
  --cell-input-wide: 16rem;

  /* 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;
}

/* The cca site's colors (`data-site="cca"` on the page's root, set by admin.js): Commonwealth Care Alliance's two
   colors from the logo Standard Modern supplied, red #b62029 and charcoal #434647, with their tints and shades. Every
   other color is the block above. */
:root[data-site="cca"] {
  --color-brand: #b62029;
  --color-brand-bright: #bf3b43;
  --color-brand-deep: #88181f;
  --color-brand-text: #ffffff;
  --color-brand-tint: #f9edee;
  --color-brand-tint-strong: #f3dbdd;
  --color-brand-ring: rgba(182, 32, 41, 0.18);
  --color-accent: #434647;
  --color-accent-tint: #ececed;
  --color-accent-ring: rgba(67, 70, 71, 0.22);
  --color-info: #434647;
  --color-info-tint: #ececed;
  --color-info-line: rgba(67, 70, 71, 0.22);
  --color-teal: #5f6263;
  --color-teal-tint: #e3e3e3;
  --color-teal-line: rgba(95, 98, 99, 0.22);
  --color-text-soft: #434647;
  --color-focus: #434647;
}