/* Copied verbatim from packages/retailing/src/components/app/App.module.pcss (.app).
   Light is primary. */
:root {
  /* Tray geometry (overridden in default config) */
  --tray-max-width: 488px;
  --tray-body-padding: 16px;
  --tray-height-offset: 112px;
  --tray-default-height: calc(100vh - var(--tray-height-offset));

  /* Space Defaults */
  --white: #ffffff;
  --black: #1e1e1e;
  --primary-accent: #3491f7;
  --primary-accent-dark: #210080;
  --primary-accent-light: #eaf4ff;
  --gray-0: #272727;
  --gray-1: #383838;
  --gray-2: #68666a;
  --gray-3: #a4a4a8;
  --gray-4: #c7c7c7;
  --gray-5: #dfdfe0;
  --gray-6: #eaecee;
  --gray-7: #f9f9f9;

  --blue-1: #3491f7;
  --blue-1-shimmer: rgba(52, 145, 247, .4);
  --blue-2: #eaf4ff;
  --blue-3: #f4f9ff;
  --blue-4: #21344a;

  --green-1: #39d262;
  --green-2: #e8ffee;

  --red-1: #ff6561;
  --red-2: #ffeded;

  --orange-1: #f98430;
  --orange-2: #fff2e9;

  --yellow-1: #ffcc00;
  --yellow-2: #fff5cc;

  --indigo-1: #7078c7;
  --indigo-2: #e9ecff;

  --secondary-button-color: var(--gray-0);
  --secondary-button-color-hover: var(--gray-0);
  --secondary-button-text-color: var(--white);
  --secondary-button-text-color-hover: var(--white);

  --tertiary-button-color: var(--gray-6);
  --tertiary-button-color-hover: var(--gray-5);
  --tertiary-button-text-color: var(--gray-0);
  --tertiary-button-text-color-hover: var(--gray-0);

  --text-button-color: transparent;
  --text-button-color-hover: transparent;
  --text-button-text-color: var(--blue-1);
  --text-button-text-color-hover: var(--blue-4);

  /* Inputs */
  --input-text-color: var(--gray-0);
  --input-placeholder-text-color: var(--form-input-placeholder-text-color);
  --input-background-color: var(--white);
  --input-border-color: var(--gray-5);
  --input-border-radius: var(--form-input-border-radius);
  --input-focus-color: var(--blue-1);
  --input-height: 48px;
  --input-font-size-mobile: 16px;
  --input-font-size: 14px;
  --input-start-adornment-size: 12px;

  --cta-text-transform: var(--form-button-text-transform, uppercase);
}

/* Button roles. Declared on .rt-app (App.module.pcss declares them on .app) —
   the same element an external embed writes dealershipConfig.branding onto.
   These private aliases layer the widget default under the host value. */
.rt-app {
  --_primary-button-color: var(--primary-button-color, var(--primary-accent));
  --_primary-button-color-hover: var(--primary-button-color-hover, var(--primary-accent-dark));
  --_primary-button-text-color: var(--primary-button-text-color, #ffffff);
  --_primary-button-text-hover: var(--primary-button-text-hover, var(--_primary-button-text-color));
}

.dark,
[data-theme="dark"] {
  --white: #1e1e1e;
  --black: #f1f7fc;
  --gray-0: #dee6f2;
  --gray-1: #c8d3da;
  --gray-2: #c5cacf;
  --gray-3: #bcc4d0;
  --gray-4: #c7c7c7;
  --gray-5: #68666a;
  --gray-6: #383838;
  --gray-7: #272727;

  --blue-1: #3491f7;
  --blue-1-shimmer: rgba(52, 145, 247, .8);
  --blue-2: #1c303e;
  --blue-3: #162835;
  --blue-4: #c5dcf5;

  --green-1: #46d56c;
  --green-2: #202d31;

  --red-1: #ff6561;
  --red-2: #30222d;

  --orange-1: #ff9b52;
  --orange-2: #302929;

  --yellow-1: #f9d230;
  --yellow-2: #302e29;

  --indigo-1: #7078c7;
  --indigo-2: #23243b;

  /* Dark mode ignores the host-supplied input variables */
  --input-text-color: var(--gray-0);
  --input-placeholder-text-color: var(--gray-3);
}

@supports (height: 1dvh) {
  :root {
    --tray-default-height: calc(100dvh - var(--tray-height-offset));
  }
}