@import url("./health-eye-tokens.css");

@layer he-components {
  .he-brand-lockup { display: inline-flex; min-inline-size: 0; align-items: center; gap: var(--he-brand-logo-lockup-gap); color: var(--he-color-text-primary); text-decoration: none; }
  .he-brand-lockup__mark { display: grid; inline-size: 2.5rem; block-size: 2.5rem; flex: 0 0 auto; place-items: center; border-radius: 0.75rem; background: var(--he-color-brand-primary); color: var(--he-color-action-primary-text); font: 800 .75rem/1 var(--he-font-family-display); letter-spacing: -.04em; }
  .he-brand-lockup__name { font: 800 1.25rem/1 var(--he-font-family-display); letter-spacing: -.035em; }
  .he-brand-lockup__descriptor { display: block; margin-block-start: .2rem; color: var(--he-color-text-tertiary); font: 700 .625rem/1 var(--he-font-family-body); letter-spacing: .09em; text-transform: uppercase; }
  .he-brand-lockup--endorsed { display: grid; grid-template-columns: auto 1px auto; gap: var(--he-brand-logo-endorsed-gap); }
  .he-brand-lockup--endorsed::before { grid-column: 2; grid-row: 1; inline-size: 1px; block-size: 100%; background: var(--he-color-border-default); content: ""; }
  .he-brand-safe-area { display: inline-grid; padding: var(--he-brand-logo-clear-space); border: 1px dashed var(--he-color-border-subtle); place-items: center; }
  .he-brand-logo { display: block; inline-size: auto; max-inline-size: 100%; block-size: auto; }
  .he-brand-logo--wordmark { min-inline-size: var(--he-brand-logo-digital-minimum-width); }
}