@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');.info-box {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border-radius: 8px;
  width: 100%;
}

.info-box--success {
  background-color: #ddfeea;
  color: #16774d;
  border: 1px solid #35ed9f;
}

.info-box--error {
  background-color: #fcedee;
  color: #8c1f23;
  border: 1px solid #f09596;
}

.info-box--warning {
  background-color: #fff8f1;
  color: #926c00;
  border: 1px solid #ffd79c;
}

.info-box--info {
  background-color: #f0f3ff;
  color: #004d99;
  border: 1px solid #91b2ff;
}

.info-box__slot-start,
.info-box__slot-end {
  display: flex;
  align-items: center;
  justify-content: center;
}

.info-box__description {
  flex: 1;
}

.info-box__slot-end {
  cursor: pointer;
}
.app-shell {

    display: flex;

    height: 100vh;

    flex-direction: column;

    overflow: hidden
}

.app-shell__body {

    display: flex;

    min-height: 0px;

    flex: 1 1 0%;

    overflow: hidden
}

.app-shell__main {

    display: flex;

    min-height: 0px;

    min-width: 0px;

    flex: 1 1 0%;

    flex-direction: column;

    overflow: hidden
}
.remote-error {
    padding: 1rem;
    font-size: 13px;
    color: var(--color-danger)
}
.status-banner {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 13px;
  font-weight: 600;
  background: #fefce8;
  border-bottom: 1px solid #fde68a;
  color: #854d0e
}
.console-pane {

    display: flex;

    min-height: 0px;

    flex: 1 1 0%;

    flex-direction: column
}

.console-pane__body {

    min-height: 0px;

    flex: 1 1 0%;

    overflow: hidden
}

.remote-loading {

    padding: 1rem;

    font-size: 13px;

    color: var(--color-text-muted)
}


/* Design tokens for the MedantaCare "Talk to Agent" platform.
   Import once at the app root: `import '@medanta/ui/tokens.css'`. */

/* Tailwind layers. Preflight is disabled in tailwind.config.js so this does not
   fight MUI's <CssBaseline/>; we use Tailwind for utilities + @apply only. */
*, ::before, ::after{
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}
::backdrop{
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}
.container{
  width: 100%;
}
@media (min-width: 640px){
  .container{
    max-width: 640px;
  }
}
@media (min-width: 768px){
  .container{
    max-width: 768px;
  }
}
@media (min-width: 1024px){
  .container{
    max-width: 1024px;
  }
}
@media (min-width: 1280px){
  .container{
    max-width: 1280px;
  }
}
@media (min-width: 1536px){
  .container{
    max-width: 1536px;
  }
}
.visible{
  visibility: visible;
}
.collapse{
  visibility: collapse;
}
.static{
  position: static;
}
.fixed{
  position: fixed;
}
.absolute{
  position: absolute;
}
.relative{
  position: relative;
}
.block{
  display: block;
}
.inline-block{
  display: inline-block;
}
.inline{
  display: inline;
}
.flex{
  display: flex;
}
.table{
  display: table;
}
.grid{
  display: grid;
}
.inline-grid{
  display: inline-grid;
}
.contents{
  display: contents;
}
.hidden{
  display: none;
}
.transform{
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.border{
  border-width: 1px;
}
.uppercase{
  text-transform: uppercase;
}
.lowercase{
  text-transform: lowercase;
}
.capitalize{
  text-transform: capitalize;
}
.ordinal{
  --tw-ordinal: ordinal;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
}
.overline{
  text-decoration-line: overline;
}
.shadow{
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.outline{
  outline-style: solid;
}
.ring{
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.blur{
  --tw-blur: blur(8px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.filter{
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.transition{
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.ease-in-out{
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.ease-out{
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

/* ══════════════════════════════════════════════════════════════════════════
   Medanta Design System
   ══════════════════════════════════════════════════════════════════════════
   Transcribed from design's boards (Figma file yQEBhoQNvPmrSJAmF226ni):
   "Color System", "Spacing", "Border Radius" and "Typography · Web".
   Every name below is prefixed `--md-` and
   every one is new: nothing here redefines a token from the block above, so
   the existing `--color-*` / `--space-*` / `--radius-*` set keeps working
   exactly as before. Adopt these per component; there is no big-bang
   migration.

   Kept in its own `:root` block rather than merged into the app tokens —
   these are a transcription of design's board, the ones above are hand-tuned
   app values, and `__tests__/tokens.test.ts` mirrors only the latter into
   `tokens.ts`.

   Naming follows the Figma variable paths, not the swatch captions: the
   gradient definitions reference `primary/010` and `primary/050`, so the two
   lightest steps are zero-padded as `-010` / `-050`. That also keeps the ten
   steps in lexical order. */

:root {
  /* Will be deprecated in future */

  /* Brand / status palette — Medanta (care.medanta.org): coral-red primary */
  --color-brand: #f04e30;
  --color-brand-strong: #bf2026;
  --color-brand-light: #f0755a;
  --color-brand-tint: #fde2dc;
  --color-online: #37cb95;
  --color-break: #ffab00;
  --color-meeting: #ffab00;
  --color-offline: #939598;
  --color-danger: #e53935;
  --color-warning: #f5871f;

  /* Space-separated RGB channels, for translucent variants. `rgba(var(--x),
     .17)` does not work — the browser drops the declaration — so alpha colours
     are built as `rgb(var(--color-brand-rgb) / 17%)`. Only the colours that
     need transparency carry one; add the pair (here and in `tokens.ts`) when a
     fourth does. */
  --color-brand-rgb: 240 78 48;
  --color-text-rgb: 35 31 32;
  --color-danger-rgb: 229 57 53;

  /* Surfaces & text */
  --color-bg: #f5f5f5;
  --color-surface: #ffffff;
  --color-border: #ededed;
  --color-text: #231f20;
  --color-text-muted: #6d6e71;

  /* Radii, spacing, typography */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;

  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.08);
  /* Will be deprecated in future bock ends*/

  --font-sans:
    'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Brand color */
  --md-color-brand-primary: var(--md-color-primary-500);
  --md-color-brand-secondary: var(--md-color-secondary-500);

  /* ── Primitives · Primary ────────────────────────────────────────────────
     Lightest (010) to darkest (800). `-500` is the brand coral and is the
     same value as the older `--color-brand`. Design draws 010 very slightly
     warmer than 050 rather than lighter — transcribed as shown. */
  --md-color-primary-010: #faf3f2;
  --md-color-primary-050: #fdf1f0;
  --md-color-primary-100: #fcdfdd;
  --md-color-primary-200: #f9c1bd;
  --md-color-primary-300: #f79f97;
  --md-color-primary-400: #f5786b;
  --md-color-primary-500: #f04e30;
  --md-color-primary-600: #bf3c24;
  --md-color-primary-700: #922c19;
  --md-color-primary-800: #671d0f;

  /* ── Primitives · Secondary ──────────────────────────────────────────────
     The graphite ramp. `-500` matches the older `--color-text-muted`. */
  --md-color-secondary-010: #f7f7f7;
  --md-color-secondary-050: #f0f1f1;
  --md-color-secondary-100: #dfdfe0;
  --md-color-secondary-200: #c3c4c5;
  --md-color-secondary-300: #a5a6a8;
  --md-color-secondary-400: #88898c;
  --md-color-secondary-500: #6d6e71;
  --md-color-secondary-600: #565759;
  --md-color-secondary-700: #414244;
  --md-color-secondary-800: #2e2e30;

  /* Bg colors */
  --md-color-bg-white: #ffffff;
  --md-color-bg-primary: #f9fafc;
  --md-color-bg-success: #ddfeea;
  --md-color-bg-warning: #fff8f1;
  --md-color-bg-danger: #fcedee;
  --md-color-bg-info: #f0f3ff;
  --md-color-bg-neutral: #f0f1f1;

  /* Text Colors */
  --md-color-text-primary: #414244;
  --md-color-text-secondary: #6d6e71;
  --md-color-text-muted: #c3c4c5;
  --md-color-text-success: #16774d;
  --md-color-text-warning: #926c00;
  --md-color-text-danger: #8c1f23;
  --md-color-text-info: #004d99;

  /* Border Colors */
  --md-color-border-primary: #c3c4c5;
  --md-color-border-success: #35ed9f;
  --md-color-border-warning: #ffd79c;
  --md-color-border-danger: #f09596;
  --md-color-border-info: #91b2ff;

  /* Icon Colors */
  --md-color-icon-primary: #88898c;
  --md-color-icon-success: #2dce89;
  --md-color-icon-warning: #ffbe00;
  --md-color-icon-danger: #e63a40;
  --md-color-icon-info: #0084ff;

  /* ── Spacing ─────────────────────────────────────────────────────────────
     A t-shirt scale on MUI's 8px base, bound to padding, gap and margin.

     Design publishes three modes — Mobile (tighter), Web and Kiosk. **These
     are the Web values**, the only ones the product needs today; the names
     carry no mode, so adding Mobile or Kiosk later means overriding the same
     twelve tokens under a container query or a `data-*` attribute, the way
     `[data-theme='dark']` overrides the status colours below. Do not bake a
     mode into the name.

     Overlaps with the older `--space-1` … `--space-4` in value (4/8/12/16px)
     but not in name, so both scales coexist. Prefer these in new work. */
  --md-spacing-2xs: 4px;
  --md-spacing-xs: 8px;
  --md-spacing-sm: 12px;
  --md-spacing-md: 16px;
  --md-spacing-lg: 24px;
  --md-spacing-xl: 32px;
  --md-spacing-2xl: 40px;
  --md-spacing-3xl: 48px;
  --md-spacing-4xl: 64px;
  --md-spacing-5xl: 80px;
  --md-spacing-6xl: 96px;

  /* Gutter between a screen's outer edge and its content. */
  --md-spacing-screen: 24px;

  /* ── Border radius ───────────────────────────────────────────────────────
     MUI's shape scale, bound to cornerRadius. `md` (8px) is design's default
     for cards and inputs — note it is not the same as the older
     `--radius-md` (10px), which is what MUI's `shape.borderRadius` uses.

     Web set only. The board also carries a Kiosk row (`radius/4xl` 28px,
     `radius/5xl` 32px, `radius/kiosk` 40px), deliberately not transcribed —
     same reasoning as the spacing modes above. */
  --md-radius-none: 0px;
  --md-radius-xs: 2px;
  --md-radius-sm: 4px;
  --md-radius-md: 8px;
  --md-radius-lg: 12px;
  --md-radius-xl: 16px;
  --md-radius-2xl: 20px;
  --md-radius-3xl: 24px;

  /* The board draws this as ∞. A large finite length is the usual stand-in:
     it clamps to half the shorter side, so it pills a button and circles a
     square without the layout surprises `50%` brings on a non-square box. */
  --md-radius-full: 9999px;

  /* ── Typography ──────────────────────────────────────────────────────────
     The eleven text styles from design's "Typography · Web" board, each as a
     size / line-height / weight triple. Prefer the `text-style()` mixin in
     `styles/_typography.scss` over reaching for these by hand; they are
     published as custom properties so the plain-CSS files and MUI `sx` props
     can use them too, neither of which can call a Sass mixin.

     Deliberately no font-family: the board specifies Inter, but the app runs
     on Montserrat (see `--font-sans`). Size, line-height and weight are what
     transfer between the two; the family stays whatever the app sets, so
     these tokens do not fight it. All four weights below are already in the
     Montserrat @import at the top of this file.

     `display` at 32px is smaller than `h1` at 36px. That is what the board
     shows — not a transcription slip. */

  /* Font Sizes */
  /* `4xs` and `xxl` are in-between steps that exist to carry design's
     `caption` (11px) and `h1` (36px) exactly. Note `xxl` (36px) is NOT the
     same as `2xl` (40px) — the two names read alike but are one step apart,
     and a test pins them so. Everything else is the clean t-shirt rhythm. */
  --md-font-size-4xs: 11px;
  --md-font-size-3xs: 12px;
  --md-font-size-2xs: 14px;
  --md-font-size-xs: 16px;
  --md-font-size-sm: 18px;
  --md-font-size-md: 20px;
  --md-font-size-lg: 24px;
  --md-font-size-xl: 32px;
  --md-font-size-xxl: 36px;
  --md-font-size-2xl: 40px;
  --md-font-size-3xl: 48px;

  /* Font Line Heights & Weights */
  --md-font-weight-regular: 400;
  --md-font-weight-medium: 500;
  --md-font-weight-semibold: 600;
  --md-font-weight-bold: 700;

  /* ── Gradients ───────────────────────────────────────────────────────────
     Linear gradients built on the primary ramp. Design publishes the stops as
     `/from` and `/to` variables, which is what the pairs below are; the
     ready-made `linear-gradient()` after each pair is a convenience. The
     board does not state an angle, so these default to `90deg` (left to
     right) — pass your own if a design calls for something else:
     `background: linear-gradient(180deg, var(--md-gradient-primary-3-default-from), var(--md-gradient-primary-3-default-to));` */

  --md-gradient-primary-1-subtle-from: var(--md-color-primary-010);
  --md-gradient-primary-1-subtle-to: var(--md-color-primary-050);
  --md-gradient-primary-1-subtle: linear-gradient(
    90deg,
    var(--md-gradient-primary-1-subtle-from) 0%,
    var(--md-gradient-primary-1-subtle-to) 100%
  );

  --md-gradient-primary-2-light-from: var(--md-color-primary-050);
  --md-gradient-primary-2-light-to: var(--md-color-primary-200);
  --md-gradient-primary-2-light: linear-gradient(
    90deg,
    var(--md-gradient-primary-2-light-from) 0%,
    var(--md-gradient-primary-2-light-to) 100%
  );

  --md-gradient-primary-3-default-from: var(--md-color-primary-100);
  --md-gradient-primary-3-default-to: var(--md-color-primary-500);
  --md-gradient-primary-3-default: linear-gradient(
    90deg,
    var(--md-gradient-primary-3-default-from) 0%,
    var(--md-gradient-primary-3-default-to) 100%
  );

  --md-gradient-primary-4-strong-from: var(--md-color-primary-500);
  --md-gradient-primary-4-strong-to: var(--md-color-primary-800);
  --md-gradient-primary-4-strong: linear-gradient(
    90deg,
    var(--md-gradient-primary-4-strong-from) 0%,
    var(--md-gradient-primary-4-strong-to) 100%
  );

  /* Fades to fully transparent. `transparent` computes to rgb(0 0 0 / 0), so
     Safari would interpolate through grey; the explicit zero-alpha coral
     keeps the fade in hue. */
  --md-gradient-primary-5-fade-from: var(--md-color-primary-500);
  --md-gradient-primary-5-fade-to: rgb(240 78 48 / 0%);
  --md-gradient-primary-5-fade: linear-gradient(
    90deg,
    var(--md-gradient-primary-5-fade-from) 0%,
    var(--md-gradient-primary-5-fade-to) 100%
  );

  /* ── Shadows ─────────────────────────────────────────────────────────────
     Design's elevation scale, from the "Shadow" board. The board's names
     carry a sort-key prefix (`Shadow/Web/1-xs` … `6-2xl`) that is dropped
     here: the step name is the scale, exactly as it is for `--md-spacing-*`
     and `--md-radius-*`, and `6-2xl` has no unambiguous camelCase form for
     the `tokens.ts` mirror. The gradients keep their number because there
     the words (subtle / default / strong) carry no inherent order.

     Each step is three stacked drop shadows, which is what gives
     the elevation its shape — a tight contact shadow at 20% black, a wider
     key shadow at 14%, and a broad ambient one at 12%. Apply a whole step;
     the layers are not meant to be used apart.

     Figma's `radius` is CSS `blur`, and its effects are listed top layer
     first, which is also CSS's order, so each list transcribes straight
     across as `offset-x offset-y blur spread color`.

     Alphas are carried as 8-digit hex rather than `rgba()` because that is
     the exact value the board publishes — `#00000024` is 14.1% black, which
     `rgba(0, 0, 0, 0.14)` only approximates.

     Worth knowing: these six are Material's elevation 1, 2, 4, 8, 16 and 24
     verbatim, so MUI's `boxShadow: 1 | 2 | 4 | 8 | 16 | 24` already renders
     the same pixels. Prefer the token in stylesheets anyway — the numbers
     are design's contract, MUI's default just happens to agree today.

     Web mode only, as with spacing and radius. */

  --md-shadow-xs:
    0 2px 1px -1px #00000033, 0 1px 1px 0 #00000024, 0 1px 3px 0 #0000001f;
  --md-shadow-sm:
    0 3px 1px -2px #00000033, 0 2px 2px 0 #00000024, 0 1px 5px 0 #0000001f;
  --md-shadow-md:
    0 2px 4px -1px #00000033, 0 4px 5px 0 #00000024, 0 1px 10px 0 #0000001f;
  --md-shadow-lg:
    0 5px 5px -3px #00000033, 0 8px 10px 1px #00000024, 0 3px 14px 2px #0000001f;
  --md-shadow-xl:
    0 8px 10px -5px #00000033, 0 16px 24px 2px #00000024,
    0 6px 30px 5px #0000001f;
  --md-shadow-2xl:
    0 11px 15px -7px #00000033, 0 24px 38px 3px #00000024,
    0 9px 46px 8px #0000001f;
}

/* ── Status tokens · Dark mode ─────────────────────────────────────────────
   Opt-in only: set `data-theme="dark"` on <html> (or any ancestor) to switch.
   Deliberately NOT wired to `prefers-color-scheme` — the product has no dark
   mode yet, and reacting to the OS setting would flip these for users who
   never asked for it. Add the media query when dark mode actually ships. */
[data-theme='dark'] {
  /* Slot first, family second — the same shape as the `:root` block above.
     These names must track it exactly: a mismatch does not error, it just
     declares an orphan custom property that nothing reads, and dark mode
     silently does nothing. */
  --md-color-bg-success: #0c5133;
  --md-color-text-success: #35ed9f;
  --md-color-border-success: #21a16a;
  --md-color-icon-success: #31de94;

  --md-color-bg-warning: #624700;
  --md-color-text-warning: #ffd79c;
  --md-color-border-warning: #c99500;
  --md-color-icon-warning: #ffcc78;

  --md-color-bg-danger: #641416;
  --md-color-text-danger: #f09596;
  --md-color-border-danger: #ba2d32;
  --md-color-icon-danger: #ed6e71;

  --md-color-bg-info: #00346b;
  --md-color-text-info: #91b2ff;
  --md-color-border-info: #0069cd;
  --md-color-icon-info: #679dff;

  /* The old `neutral` text/border/icon slots are the generic `-primary` ones
     now: their light values (#414244 / #c3c4c5 / #88898c) are exactly what
     `--md-color-{text,border,icon}-primary` hold, so the dark values carry
     over unchanged. `bg` is the one slot that kept a `neutral` family. */
  --md-color-bg-neutral: #414244;
  --md-color-text-primary: #a5a6a8;
  --md-color-border-primary: #6d6e71;
  --md-color-icon-primary: #a5a6a8;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  /* font-family: var(--font-sans); */
  color: var(--color-text);
  background: var(--color-bg);
}