/* -------------------------------------------------------------------------
 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-200: 1px solid var(--vds-transparent-gray-200, #0021372e);
  --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-border-color-default: var(--vds-border-color-default, #00162c17);
  --el8-border-color-200: var(--vds-transparent-gray-200, #0021372e);
  --el8-box-shadow-bottom-highlight: 0 -1px 0 0 rgba(255, 255, 255, 0.32);
  --el8-box-shadow-top-highlight: 0 1px 0 0 rgba(255, 255, 255, 0.32);
  --el8-border-color-focus: var(--vds-border-color-focus, #4595f7);

  --el8-legacy-font-size-100: 0.8125rem; /* 13px */
  --el8-surface-default: var(--vds-surface-default, #fff);
  --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-text-primary-light-color: var(--vds-text-primary-light-color, #fff);
  --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-elevation-md: var(
    --vds-elevation-md,
    0px 0px 1px 0px rgba(9, 30, 66, 0.48),
    0px 4px 8px 0px rgba(9, 30, 66, 0.16)
  );
  --el8-font-family-sans: var(
    --vds-font-family-sans,
    "Open Sans",
    "Helvetica Neue",
    Helvetica,
    sans-serif
  );
  --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-elevation-md: var(
    --vds-elevation-md,
    0px 0px 1px 0px rgba(9, 30, 66, 0.48),
    0px 4px 8px 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-75, #f0f3f4);

  --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-border-radius: var(--vds-border-radius-md, 4px);
  --el8-button-focus-outline: 2px solid var(--el8-border-color-focus);
  --el8-button-focus-outline-offset: 0;

  --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: #2c7ac9; /* FPO new primary action blue */
  --el8-button-primary-hover: #246bb2; /* FPO new primary action blue hover */
  --el8-button-primary-active: #1f5c98; /* FPO new primary action blue active */
  --el8-button-default-color: var(--vds-button-default-color, #00181ed9);
  --el8-button-default-surface: var(--el8-surface-default);
  --el8-button-default-hover: var(--vds-gray-200, #cdd7db);
  --el8-button-default-active: var(--vds-gray-300, #b9c6cb);
  --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
  );

  --el8-popover-border-radius: 6px;
  --el8-popover-box-shadow:
    0 0 0 1px rgba(16, 22, 26, 0.1), 0 2px 4px rgba(16, 22, 26, 0.2),
    0 8px 24px rgba(16, 22, 26, 0.2);
  --el8-popover-surface: var(--vds-surface-default, #fff);
  --el8-popover-padding: 2px;
  --el8-popover-border: 3px solid var(--el8-popover-surface);
  --el8-popover-item-padding: 0.25rem 0.5rem;
  --el8-popover-item-surface: transparent;
  --el8-popover-item-color: var(--el8-text-primary-color);
  --el8-popover-item-surface-hover: var(
    --vds-popover-item-surface-hover,
    #000f230d
  );
  --el8-popover-item-surface-selected: var(
    --vds-popover-item-surface-selected,
    #0e6bdd
  );
  --el8-popover-item-color-selected: var(
    --vds-popover-item-color-selected,
    #fff
  );
  --el8-popover-item-border-radius: 4px; /* less than popover-padding */

  --el8-input-border: var(--el8-border-200);
  --el8-input-border-color-disabled: var(
    --vds-input-border-color-disabled,
    #00162c17
  );
  --el8-input-border-color-hover: var(
    --vds-input-border-color-hover,
    #001a2c73
  );
  --el8-input-border-radius: 4px;
  --el8-input-xs-padding: 0 0.25rem;
  --el8-input-sm-padding: 0.25rem 0.375rem; /* FPO value */
  --el8-input-md-padding: 0.25rem 0.375rem;
  --el8-input-user-text-color: var(--vds-input-user-text-color, #142125);
  --el8-input-user-text-color-disabled: var(
    --vds-input-user-text-disabled,
    #001a2c73
  );
  --el8-input-placeholder-color: var(--el8-text-muted-color);
  --el8-input-surface: var(--vds-surface-default, #fff);
  --el8-input-surface-activated: var(--vds-input-surface-activated, #fffceb);
  --el8-input-surface-focus: var(--vds-input-surface-focus, #fffceb);
  --el8-input-surface-disabled: var(--vds-input-surface-disabled, #000f230d);
  --el8-input-surface-hover: var(--vds-input-surface-hover, #000f230d);
  --el8-input-label-color: var(--vds-input-contained-label-color, #00182694);
  --el8-input-label-disabled-color: var(
    --vds-input-contained-label-disabled,
    #001b2f40
  );
  --el8-input-focus-outline: 2px solid var(--el8-border-color-focus);
  --el8-input-focus-outline-offset: 0;

  --el8-icon-menu-closed: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTguMTM3MjIgNS42OTE3NEM4LjM2NTAyIDUuNDYzOTMgOC43MzQzNyA1LjQ2MzkzIDguOTYyMTggNS42OTE3NEM5LjE4OTk4IDUuOTE5NTQgOS4xODk5OCA2LjI4ODg5IDguOTYyMTggNi41MTY2OUw2Ljk5OTg2IDguNDc5TDUuMDM3NTUgNi41MTY2OUM0LjgwOTc1IDYuMjg4ODkgNC44MDk3NSA1LjkxOTU0IDUuMDM3NTUgNS42OTE3NEM1LjI2NTM2IDUuNDYzOTMgNS42MzQ3MSA1LjQ2MzkzIDUuODYyNTEgNS42OTE3NEw2Ljk5OTg2IDYuODI5MDlMOC4xMzcyMiA1LjY5MTc0WiIgZmlsbD0iYmxhY2siLz4KPC9zdmc+Cg==");
  /* static/image/favicon.svg encoded as base64 */
  --el8-icon-elation: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI3MiIgaGVpZ2h0PSI3MiIgZmlsbD0ibm9uZSIgdmlld0JveD0iMCAwIDcyIDcyIj48cGF0aCBmaWxsPSIjMWM5M2JhIiBkPSJNMzYgNzJDMTYuMTE4IDcyIDAgNTUuODgyIDAgMzZTMTYuMTE4IDAgMzYgMHMzNiAxNi4xMTggMzYgMzYtMTYuMTE4IDM2LTM2IDM2Ii8+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTMyLjIxNiAyMC40OTdhLjg4NC44ODQgMCAwIDEtLjg4NS44ODJoLTEuNjRhLjg4NS44ODUgMCAwIDEtLjg4My0uODgzdi04LjE2NWMwLS40ODcuMzk4LS44ODQuODgzLS44ODRoMS42NGMuNDg4IDAgLjg4NS4zOTcuODg1Ljg4NHpNNTAuOTc0IDU1LjQ0N0gyOC44NjN2LTI5LjcxaDIyLjExMXY1LjQzMkgzNC4zOTF2Ni44MzRoMTUuOTkzdjUuMjJIMzQuMzl2Ni43MDdoMTYuNTgzek0xNS4zNjUgMjkuMDlhLjg4NC44ODQgMCAwIDEtLjg4My0uODg1di0xLjY0YzAtLjQ4Ni4zOTYtLjg4My44ODMtLjg4M2g4LjE2NWMuNDg4IDAgLjg4NC4zOTcuODg0Ljg4M3YxLjY0YS44ODUuODg1IDAgMCAxLS44ODQuODg0ek0zNi41NDQgMjMuNzY3YS44ODQuODg0IDAgMCAxLTEuMjQ5LS4wMDFsLTEuMTYtMS4xNmEuODg1Ljg4NSAwIDAgMSAwLTEuMjQ5bDUuNzczLTUuNzczYS44ODUuODg1IDAgMCAxIDEuMjUgMGwxLjE2IDEuMTZhLjg4NS44ODUgMCAwIDEgMCAxLjI1ek0yMS4wMjMgMzkuMjg0YS44ODQuODg0IDAgMCAxLTEuMjQ5LS4wMDFsLTEuMTYtMS4xNmEuODg1Ljg4NSAwIDAgMSAwLTEuMjQ4bDUuNzc0LTUuNzc0YS44ODUuODg1IDAgMCAxIDEuMjQ5IDBsMS4xNiAxLjE2YS44ODUuODg1IDAgMCAxIDAgMS4yNXpNMTguNjE4IDE3LjkwM2EuODg0Ljg4NCAwIDAgMSAuMDAxLTEuMjQ5bDEuMTYtMS4xNmEuODg1Ljg4NSAwIDAgMSAxLjI0OCAwbDUuNzc0IDUuNzczYS44ODUuODg1IDAgMCAxIDAgMS4yNWwtMS4xNiAxLjE2YS44ODUuODg1IDAgMCAxLTEuMjUgMHoiLz48L3N2Zz4=");
}