/* -------------------------------------------------------------------------
 Elation Design Tokens
 Description: Globally available design tokens for universal use across Django-rendered pages.
 this file is intended to only include CSS custom properties, not actual styles.

 Naming format: el8 - category - type - property - state

 - Category: The primitive of the property (e.g., dialog, button, input, ...)
 - Type (optional): Distinguish variants within the category. Be concise but clear. (e.g., primary / secondary, sm / md / lg, ...)
 - Property: The specific CSS property this token targets. (e.g., font-size, color, border, border-color, ...)
 - State (optional): Distinguish between different states of the property (e.g., hover, active, focus, ...)

 -------------------------------------------------------------------------  */

:root {
  --el8-border-300: 1px solid var(--vds-border-color-300, #001b2f40);
  --el8-border-400: 1px solid var(--vds-border-color-400, #001a2c73);
  --el8-border-default: 1px solid var(--vds-border-color-default, #00162c17);
  --el8-legacy-font-size-100: 0.8125rem; /* 13px */
  --el8-surface-100: var(--vds-surface-100, #e4eaec);
  --el8-surface-mask: var(--vds-surface-mask, #01202f80);
  --el8-text-primary-color: var(--vds-text-primary-color, #142125);
  --el8-text-secondary-color: var(--vds-text-secondary-color, #00181ed9);
  --el8-text-muted-color: var(--vds-text-muted-color, #00182694);
  --el8-text-app-color: var(--vds-gray-700, #374e55);
  --el8-elevation-sm: var(
    --vds-elevation-sm,
    0px 0px 1px 0px rgba(9, 30, 66, 0.16),
    0px 1px 4px 0px rgba(9, 30, 66, 0.16)
  );

  --el8-dialog-border-radius: var(--vds-border-radius-lg, 8px);
  --el8-dialog-box-shadow: var(--vds-elevation-2x, 0 3px 15px #000);
  --el8-dialog-header-color: var(--vds-text-primary-color, #142125);
  --el8-dialog-header-footer-surface: var(--vds-surface-100, #e4eaec);

  --el8-alert-dialog-block-padding: 1.25rem;
  --el8-alert-dialog-inline-padding: 0.9375rem; /* Matches the padding from `padh15` */
  --el8-alert-dialog-title-color: var(--vds-intent-danger-color, #ac0116);
  --el8-alert-dialog-title-font-size: var(--vds-font-base-size-400, 1.25rem);
  --el8-alert-dialog-title-font-weight: var(--vds-font-weight-semi, 600);

  --el8-feed-item-border-color: color-mix(
    in oklch,
    var(--vds-orange-300, #ffad61) 80%,
    white
  );
  --el8-feed-item-border: 2px solid var(--el8-feed-item-border-color);
  --el8-feed-item-border-radius: var(--vds-border-radius-lg, 8px);
  --el8-feed-item-border-width-hover: 5px; /* 4px + 1px border */
  --el8-feed-item-inset-border-radius: 6px; /* --el8-feed-item-border-radius - the 2px border width */
  --el8-feed-item-font-size: 0.8125rem; /* 13px */
  --el8-feed-item-line-height: 1.2;
  --el8-feed-item-surface: var(--vds-surface-default, #fff);
  --el8-feed-item-surface-hover: color-mix(
    in oklch,
    var(--el8-feed-item-surface) 80%,
    transparent
  );
  --el8-feed-item-padding: 0.3125rem;

  --el8-letter-container-border: var(--el8-border-400);
  --el8-letter-container-border-radius: 6px;
  --el8-letter-container-responses-surface: var(
    --el8-dialog-header-footer-surface
  );
  --el8-letter-container-padding-inline: 0.75rem;

  --el8-data-color-cardiac: var(--vds-blueberry-regular, #0346a0);
  --el8-data-color-imaging: var(--vds-blueberry-regular, #0346a0);
  --el8-data-color-injection: var(--vds-plum-regular, #a53ff3);
  --el8-data-color-lab: var(--vds-mint-regular, #09cea0);
  --el8-data-color-prescription: var(--vds-plum-regular, #a53ff3);
  --el8-data-color-pulmonary: var(--vds-blueberry-regular, #0346a0);
  --el8-data-color-referral: var(--vds-cornflower-regular, #7db6fc);
  --el8-data-color-sleep: var(--vds-blueberry-regular, #0346a0);
  --el8-data-color-tangerine: var(--vds-tangerine-regular, #f98d2f);

  --el8-button-accent-color: var(--vds-button-accent-color, #ffffff);
  --el8-button-accent-surface: var(--vds-button-accent-surface, #ff754c);
  --el8-button-accent-hover: var(--vds-button-accent-hover, #ff6333);
  --el8-button-accent-active: var(--vds-button-accent-active, #e94416);
  --el8-button-primary-color: var(--vds-button-primary-color, #ffffff);
  --el8-button-primary-surface: var(--vds-button-primary-surface, #0394ce);
  --el8-button-primary-hover: var(--vds-button-primary-hover, #037fb0);
  --el8-button-primary-active: var(--vds-button-primary-active, #026897);
  --el8-button-default-color: var(--vds-button-default-color, #00181ed9);
  --el8-button-default-surface: var(--vds-button-default-surface, #00162c17);
  --el8-button-default-hover: var(--vds-button-default-hover, #0021372e);
  --el8-button-default-active: var(--vds-button-default-active, #001b2f40);
  --el8-button-default-color-disabled: var(
    --vds-button-default-color-disabled,
    #001b2f40
  );
  --el8-button-default-surface-disabled: var(
    --vds-button-default-surface-disabled,
    #00162c17
  );
  --el8-button-link-color: var(--vds-button-link-color, #296bbc);
  --el8-button-link-hover-color: var(--vds-button-link-hover-color, #002733);
  --el8-button-link-active-color: var(--vds-button-link-active-color, #002733);
  --el8-button-link-surface: var(--vds-button-link-surface, #ffffff00);
  --el8-button-link-surface-hover: var(
    --vds-button-link-surface-hover,
    #c2eefe
  );
  --el8-button-link-surface-active: var(
    --vds-button-link-surface-active,
    #9ae3fe
  );
  --el8-button-ghost-color: var(--vds-button-ghost-color, #001620c2);
  --el8-button-ghost-color-hover: var(
    --vds-button-ghost-color-hover,
    #08151af2
  );
  --el8-button-ghost-color-active: var(
    --vds-button-ghost-color-active,
    #08151af2
  );
  --el8-button-ghost-surface: var(--vds-button-ghost-surface, #ffffff00);
  --el8-button-ghost-surface-hover: var(
    --vds-button-ghost-surface-hover,
    #000f230d
  );
  --el8-button-ghost-surface-active: var(
    --vds-button-ghost-surface-active,
    #0021372e
  );
  --el8-button-danger-color: var(--vds-button-danger-color, #ffffff);
  --el8-button-danger-surface: var(--vds-button-danger-surface, #fb1933);
  --el8-button-danger-hover: var(--vds-button-danger-hover, #d9021c);
  --el8-button-danger-active: var(--vds-button-danger-active, #ac0116);
  --el8-button-danger-color-soft: var(--vds-button-danger-color-soft, #d9021c);
  --el8-button-danger-surface-soft: var(
    --vds-button-danger-surface-soft,
    #fee1e5
  );
  --el8-button-danger-hover-soft: var(--vds-button-danger-hover-soft, #fec2c9);
  --el8-button-danger-active-soft: var(
    --vds-button-danger-active-soft,
    #fda5af
  );
  --el8-button-danger-surface-ghost: var(
    --vds-button-danger-surface-ghost,
    #ffffff00
  );
  --el8-button-danger-hover-ghost: var(
    --vds-button-danger-hover-ghost,
    #fee1e5
  );
  --el8-button-danger-color-ghost: var(
    --vds-button-danger-color-ghost,
    #fb1933
  );
  --el8-button-danger-active-ghost: var(
    --vds-button-danger-active-ghost,
    #fec2c9
  );
  --el8-button-default-border-color-disabled: var(
    --vds-button-default-border-color-disabled,
    #00162c17
  );
  --el8-button-accent-surface-disabled: var(
    --vds-button-accent-surface-disabled,
    #ffc8b7
  );
  --el8-button-primary-surface-disabled: var(
    --vds-button-primary-surface-disabled,
    #9ad4eb
  );
  --el8-button-link-color-disabled: var(
    --vds-button-link-color-disabled,
    #81c9e6
  );
  --el8-button-ghost-color-disabled: var(
    --vds-button-ghost-color-disabled,
    #b9c6cb
  );
  --el8-button-danger-surface-disabled: var(
    --vds-button-danger-surface-disabled,
    #fda3ad
  );
  --el8-button-danger-surface-soft-disabled: var(
    --vds-button-danger-surface-soft-disabled,
    #fff3f5
  );
  --el8-button-danger-color-soft-disabled: var(
    --vds-button-danger-color-soft-disabled,
    #f7ccd2
  );
  --el8-button-danger-color-ghost-disabled: var(
    --vds-button-danger-color-ghost-disabled,
    #fda3ad
  );
  --el8-button-disabled-color: var(--vds-button-disabled-color, #b9c6cb);
  --el8-button-disabled-surface: var(--vds-button-disabled-surface, #e4eaec);
  --el8-button-disabled-border-color: var(
    --vds-button-disabled-border-color,
    #00162c17
  );
  /* static/image/favicon.svg encoded as base64 */
  --el8-icon-elation: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI3MiIgaGVpZ2h0PSI3MiIgZmlsbD0ibm9uZSIgdmlld0JveD0iMCAwIDcyIDcyIj48cGF0aCBmaWxsPSIjMWM5M2JhIiBkPSJNMzYgNzJDMTYuMTE4IDcyIDAgNTUuODgyIDAgMzZTMTYuMTE4IDAgMzYgMHMzNiAxNi4xMTggMzYgMzYtMTYuMTE4IDM2LTM2IDM2Ii8+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTMyLjIxNiAyMC40OTdhLjg4NC44ODQgMCAwIDEtLjg4NS44ODJoLTEuNjRhLjg4NS44ODUgMCAwIDEtLjg4My0uODgzdi04LjE2NWMwLS40ODcuMzk4LS44ODQuODgzLS44ODRoMS42NGMuNDg4IDAgLjg4NS4zOTcuODg1Ljg4NHpNNTAuOTc0IDU1LjQ0N0gyOC44NjN2LTI5LjcxaDIyLjExMXY1LjQzMkgzNC4zOTF2Ni44MzRoMTUuOTkzdjUuMjJIMzQuMzl2Ni43MDdoMTYuNTgzek0xNS4zNjUgMjkuMDlhLjg4NC44ODQgMCAwIDEtLjg4My0uODg1di0xLjY0YzAtLjQ4Ni4zOTYtLjg4My44ODMtLjg4M2g4LjE2NWMuNDg4IDAgLjg4NC4zOTcuODg0Ljg4M3YxLjY0YS44ODUuODg1IDAgMCAxLS44ODQuODg0ek0zNi41NDQgMjMuNzY3YS44ODQuODg0IDAgMCAxLTEuMjQ5LS4wMDFsLTEuMTYtMS4xNmEuODg1Ljg4NSAwIDAgMSAwLTEuMjQ5bDUuNzczLTUuNzczYS44ODUuODg1IDAgMCAxIDEuMjUgMGwxLjE2IDEuMTZhLjg4NS44ODUgMCAwIDEgMCAxLjI1ek0yMS4wMjMgMzkuMjg0YS44ODQuODg0IDAgMCAxLTEuMjQ5LS4wMDFsLTEuMTYtMS4xNmEuODg1Ljg4NSAwIDAgMSAwLTEuMjQ4bDUuNzc0LTUuNzc0YS44ODUuODg1IDAgMCAxIDEuMjQ5IDBsMS4xNiAxLjE2YS44ODUuODg1IDAgMCAxIDAgMS4yNXpNMTguNjE4IDE3LjkwM2EuODg0Ljg4NCAwIDAgMSAuMDAxLTEuMjQ5bDEuMTYtMS4xNmEuODg1Ljg4NSAwIDAgMSAxLjI0OCAwbDUuNzc0IDUuNzczYS44ODUuODg1IDAgMCAxIDAgMS4yNWwtMS4xNiAxLjE2YS44ODUuODg1IDAgMCAxLTEuMjUgMHoiLz48L3N2Zz4=");
}