/* Angroos customer-facing design-system foundation.
   Values are extracted from the approved homepage and account masters. */
:root {
  --ds-font-ui: var(--font-geist), Arial, sans-serif;
  --ds-font-display: var(--font-geist), Arial, sans-serif;
  --ds-radius-pill: 999px;
  --ds-control-main-height: 40px;
  --ds-control-compact-height: 30px;
  --ds-field-height: 40px;
  --ds-home-ink: #15140f;
  --ds-home-muted: #716d62;
  --ds-home-line: #d8d3c7;
  --ds-home-title-hero-desktop: 26px;
  --ds-home-title-hero-compact: 18px;
  --ds-home-title-section-desktop: 26px;
  --ds-home-title-section-compact: 18px;
  --ds-home-copy-desktop: 12px;
  --ds-home-copy-hero-compact: 10px;
  --ds-home-copy-compact: 11px;
  --ds-home-cta-font-desktop: 12px;
  --ds-home-cta-font-compact: 11px;
  --ds-home-experience-height-desktop: 30px;
  --ds-home-experience-height-compact: 26px;
  --ds-home-experience-font-desktop: 10px;
  --ds-home-experience-font-compact: 9px;
  --ds-home-rhythm-desktop: 40px;
  --ds-home-rhythm-tablet: 48px;
  --ds-home-rhythm-compact: 24px;
  --ds-home-heading-gap-desktop: 16px;
  --ds-home-heading-gap-tablet: 20px;
  --ds-home-heading-gap-compact: 16px;
  --ds-account-ink: #201d18;
  --ds-account-muted: #665d51;
  --ds-account-heading-size: 26px;
  --ds-account-heading-weight: 500;
  --ds-account-copy-size: 12px;
  --ds-account-copy-weight: 400;
  --ds-account-summary-value-size: 28px;
  --ds-account-summary-value-weight: 500;
  --ds-account-panel-padding: 26px;
  --ds-account-panel-padding-compact: 22px 16px;
  --ds-account-panel-radius: 26px;
  --ds-account-panel-radius-compact: 19px;
  --ds-account-main-columns: minmax(0, 2.1fr) minmax(320px, 1fr);
  --ds-account-main-columns-compact: 1fr;
  --ds-account-main-action-size: 12px;
  --ds-account-main-action-weight: 600;
  --ds-account-compact-action-size: 10px;
  --ds-account-compact-action-weight: 600;
  --ds-account-bulk-image: 86px;
  --ds-account-bulk-image-compact: 68px;
  --ds-profile-shell-width: 1060px;
  --ds-profile-shell-radius: 28px;
  --ds-profile-shell-radius-compact: 24px 24px 0 0;
  --ds-profile-nav-width: 220px;
  --ds-profile-title-size: 26px;
  --ds-profile-title-size-compact: 20px;
  --ds-profile-section-title-size: 20px;
  --ds-corporate-ink: #15140f;
  --ds-corporate-muted: #686052;
  --ds-corporate-line: #d9cdbb;
  --ds-corporate-surface: #f6f0e6;
  --ds-corporate-title-hero-desktop: 26px;
  --ds-corporate-title-hero-compact: 18px;
  --ds-corporate-title-section-desktop: 26px;
  --ds-corporate-title-section-compact: 20px;
  --ds-corporate-copy-desktop: 12px;
  --ds-corporate-copy-compact: 10px;
  --ds-corporate-rhythm-desktop: 24px;
  --ds-corporate-rhythm-tablet: 20px;
  --ds-corporate-rhythm-compact: 18px;
  --ds-corporate-heading-gap-desktop: 28px;
  --ds-corporate-heading-gap-compact: 16px;
  --ds-corporate-control-height-desktop: 30px;
  --ds-corporate-control-height-compact: 20px;
}

.home-main {
  --ds-mode-ink: var(--ds-home-ink);
  --ds-mode-muted: var(--ds-home-muted);
  --ds-mode-line: var(--ds-home-line);
  --ds-home-hero-title-current: var(--ds-home-title-hero-desktop);
  --ds-home-section-title-current: var(--ds-home-title-section-desktop);
  --ds-home-copy-current: var(--ds-home-copy-desktop);
  --ds-home-rhythm-current: var(--ds-home-rhythm-tablet);
  --ds-home-heading-gap-current: var(--ds-home-heading-gap-tablet);
}

.account-hub,
.profile-modal {
  --ds-mode-ink: var(--ds-account-ink);
  --ds-mode-muted: var(--ds-account-muted);
  --ds-account-main-columns-current: var(--ds-account-main-columns);
  --ds-account-panel-padding-current: var(--ds-account-panel-padding);
  --ds-account-panel-radius-current: var(--ds-account-panel-radius);
  --ds-account-bulk-image-current: var(--ds-account-bulk-image);
  --ds-profile-title-current: var(--ds-profile-title-size);
}

.corporate-page {
  --ds-mode-ink: var(--ds-corporate-ink);
  --ds-mode-muted: var(--ds-corporate-muted);
  --ds-mode-line: var(--ds-corporate-line);
  --ds-corporate-hero-title-current: var(--ds-corporate-title-hero-desktop);
  --ds-corporate-section-title-current: var(--ds-corporate-title-section-desktop);
  --ds-corporate-copy-current: var(--ds-corporate-copy-desktop);
  --ds-corporate-rhythm-current: var(--ds-corporate-rhythm-tablet);
  --ds-corporate-heading-gap-current: var(--ds-corporate-heading-gap-desktop);
  --ds-corporate-control-height-current: var(--ds-corporate-control-height-desktop);
}

:where(.ds-page-container), :where(.ds-card), :where(.ds-field),
:where(.ds-button), :where(.ds-badge), :where(.ds-caption) { box-sizing: border-box; }
:where(.ds-responsive-grid), :where(.ds-section-header), :where(.ds-card) { min-width: 0; }
:where(.ds-button) { display: inline-flex; align-items: center; justify-content: center; }
:where(.ds-field) { font: inherit; }

@media (min-width: 1025px) {
  .home-main {
    --ds-home-rhythm-current: var(--ds-home-rhythm-desktop);
    --ds-home-heading-gap-current: var(--ds-home-heading-gap-desktop);
  }
  .corporate-page { --ds-corporate-rhythm-current: var(--ds-corporate-rhythm-desktop); }
}

@media (max-width: 900px) {
  .account-hub { --ds-account-main-columns-current: var(--ds-account-main-columns-compact); }
}

@media (max-width: 720px) {
  .home-main {
    --ds-home-hero-title-current: var(--ds-home-title-hero-compact);
    --ds-home-section-title-current: var(--ds-home-title-section-compact);
    --ds-home-copy-current: var(--ds-home-copy-compact);
    --ds-home-rhythm-current: var(--ds-home-rhythm-compact);
    --ds-home-heading-gap-current: var(--ds-home-heading-gap-compact);
  }
  .corporate-page {
    --ds-corporate-hero-title-current: var(--ds-corporate-title-hero-compact);
    --ds-corporate-section-title-current: var(--ds-corporate-title-section-compact);
    --ds-corporate-copy-current: var(--ds-corporate-copy-compact);
    --ds-corporate-rhythm-current: var(--ds-corporate-rhythm-compact);
    --ds-corporate-heading-gap-current: var(--ds-corporate-heading-gap-compact);
    --ds-corporate-control-height-current: var(--ds-corporate-control-height-compact);
  }
}

@media (max-width: 640px) {
  .account-hub, .profile-modal {
    --ds-account-panel-padding-current: var(--ds-account-panel-padding-compact);
    --ds-account-panel-radius-current: var(--ds-account-panel-radius-compact);
    --ds-account-bulk-image-current: var(--ds-account-bulk-image-compact);
    --ds-profile-title-current: var(--ds-profile-title-size-compact);
  }
}