@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

:root {
  --brand-primary: oklch(0.4334 0.1075 244.3);
  --brand-secondary: oklch(0.8652 0.1768 90.38);

  /* Auth (sign-in / sign-up) page */
  --auth-page-bg: var(--brand-primary);
  --auth-page-bg-dark: var(--brand-primary);
  --auth-page-panel-bg: #fff;
  --auth-page-panel-bg-dark: #fff;
  --auth-page-panel-padding: 2.5rem;
  --auth-page-panel-gap: 1.25rem;
  --auth-page-content-gap: 1.5rem;
  /* Auth page content heading (mobile layout; optional; component defaults when unset) */
  --auth-page-content-heading-font-family: 'Barlow Condensed', sans-serif;
  --auth-page-content-heading-font-weight: 800;
  --auth-page-content-heading-text-size: 2rem;
  --auth-page-content-heading-line-height: 1.2;
  --auth-page-content-heading-text-color: #fff;
  --auth-page-content-heading-text-align: center;
  --auth-page-content-heading-text-transform: uppercase;
  --auth-page-content-heading-accent-color: var(--brand-secondary);
  /* Auth page panel heading (optional; component defaults when unset) */
  --auth-page-heading-font-family: 'Barlow Condensed', sans-serif;
  --auth-page-heading-font-weight: 900;
  --auth-page-heading-text-size: 4.5rem;
  --auth-page-heading-line-height: 1;
  --auth-page-heading-text-color: var(--brand-primary);
  --auth-page-heading-text-align: center;
  --auth-page-heading-text-transform: uppercase;
  --auth-page-heading-accent-color: var(--brand-secondary);
  /* Auth page panel subheading */
  --auth-page-subheading-font-family: 'Barlow Condensed', sans-serif;
  --auth-page-subheading-text-size: 1.5rem;
  --auth-page-subheading-line-height: 1.25;
  --auth-page-subheading-text-color: var(--brand-primary);
  --auth-page-subheading-text-align: center;
  --auth-page-subheading-text-transform: uppercase;

  /* Button */
  --button-radius: 0.1rem;
  --button-focus-ring: var(--brand-secondary);
  --button-bg: var(--brand-primary);
  --button-font-family: 'Barlow Condensed', sans-serif;
  --button-font-weight: 600;
  --button-text-size: 1rem;
  --button-text-transform: uppercase;
  /* --button-line-height */
  /* --button-text-align */
  /* --button-text */

  /* Card */
  --card-radius: 0.5rem;
  --card-bg: var(--brand-primary);
  --card-dropshadow: 2px 20px 10px rgba(120, 120, 120, 0.9);
  /* --card-bg */
  /* --card-border-color */

  /* Card image grid */
  --card-image-grid-radius: 0.5rem;
  --card-image-grid-bg: #ebebeb;

  /* Program card */
  --program-card-save-icon-color: var(--brand-secondary);
  --program-card-save-button-icon: color-mix(
    in srgb,
    var(--brand-primary),
    transparent 40%
  );
  /* --program-card-tag-text-font-family */
  --program-card-tag-text-color: #fff;
  --program-card-tag-icon-fill: var(--brand-secondary);
  /* --program-card-tag-text-transform */
  --program-card-cta-text: #000000;
  --program-card-cta-button-bg-hover: color-mix(
    in oklch,
    var(--brand-secondary) 12%,
    transparent
  );
  /* --program-card-cta-icon */
  --program-card-badge-bg: var(--brand-secondary);
  --program-card-badge-text: var(--brand-primary);
  --program-card-badge-margin-x: auto;
  --program-card-action-button-bg: var(--brand-secondary);
  --program-card-action-button-text: #fff;
  --program-card-action-button-text-pressed: var(--brand-primary);
  --program-card-action-button-bg-hover: color-mix(
    in oklch,
    var(--brand-secondary) 12%,
    transparent
  );

  --program-card-view-program-button: var(--brand-secondary);
  --program-card-why-fit-button-bg: #162e93;
  --program-card-why-fit-button-text: #fff;
  --program-card-why-fit-button-bg-hover: color-mix(
    in oklch,
    var(--brand-secondary) 12%,
    transparent
  );

  /* Program detail (single program page) */
  --program-detail-badges-justify-content: center;
  /* --program-detail-badges-align-items */
  --program-detail-meta-icon-fill: var(--brand-secondary);
  --program-detail-meta-text-color: var(--brand-primary);

  /* Bar chart (personality profile) */
  --personality-profile-bar-radius: 1.6; /* px */
  --personality-profile-bar-fill: var(--brand-secondary);
  /* --personality-profile-bar-fill: #fff; C */
  --personality-profile-bar-label-color: var(--brand-primary);

  /* Radar chart (personality profile) */
  --personality-profile-radar-axis-fill: oklch(1 0 0 / 0.5);
  --personality-profile-radar-axis-text: var(--brand-primary);
  --personality-profile-radar-fill: var(--brand-secondary);
  /* --personality-profile-radar-grid-stroke */

  /* Chart container */
  --chart-container-radius: 0.1rem;
  --chart-container-bg: var(--brand-primary);
  /* --chart-container-bg: linear-gradient(155deg, #1e3a8a 0%, var(--brand-primary) 100%); */
  --chart-radius: 0.1rem;
  --chart-bg: #fff;

  /* Chart subheading (titles above chart descriptions) */
  --chart-subheading-font-family: 'Barlow Condensed', sans-serif;
  --chart-subheading-text-align: center;
  /* --chart-subheading-text-color: var(--brand-secondary); */
  --chart-subheading-text-color: #fff;
  --chart-subheading-text-size: 1.5rem;
  --chart-subheading-text-transform: uppercase;
  /* --chart-subheading-font-weight: bold; */
  /* --chart-subheading-line-height */

  /* Chart description */
  --chart-description-text-align: center;
  --chart-description-text-color: #fff;
  /* --chart-description-text-transform */
  /* --chart-description-font-family */
  /* --chart-description-font-weight */
  /* --chart-description-text-size */
  /* --chart-description-line-height */

  /* Card title */
  --card-title-font-family: 'Barlow Condensed', sans-serif;
  --card-title-font-weight: 800;
  --card-title-text-size: 1.5rem;
  --card-title-text-align: center;
  --card-title-text-color: #fff;
  --card-title-text-transform: uppercase;
  /* --card-title-line-height */

  /* Card description */
  --card-description-text-align: center;
  --card-description-text-color: #fff;
  /* --card-description-text-transform */
  /* --card-description-font-family */
  /* --card-description-font-weight */
  /* --card-description-text-size */
  /* --card-description-line-height */

  /* Heading */
  --heading-font-family: 'Barlow Condensed', sans-serif;
  --heading-font-weight: 800;
  --heading-text-size: 2.5rem;
  --heading-text-align: center;
  --heading-text-color: var(--brand-primary);
  --heading-text-transform: uppercase;

  /* Subheading */
  --subheading-font-family: 'Barlow Condensed', sans-serif;
  --subheading-text-size: 1.5rem;
  --subheading-text-align: center;
  --subheading-text-transform: uppercase;
  --subheading-text-color: var(--brand-primary);
  /* --subheading-font-weight */
  /* --subheading-line-height */

  /* Input and textarea */
  --input-radius: 0.1rem;
  --input-ring-color: var(--brand-secondary);

  /* Checkbox */
  --checkbox-radius: 0.1rem;
  --checkbox-focus-ring: var(--brand-secondary);
  --checkbox-check: var(--brand-primary);
  --checkbox-checked-bg: var(--brand-secondary);
  --checkbox-checked-border: var(--brand-secondary);

  /* Radio */
  --radio-focus-ring: var(--brand-secondary);
  --radio-checked-bg: var(--brand-secondary);
  --radio-checked-border: var(--brand-secondary);
  --radio-checked-indicator: var(--brand-primary);

  /* Dropdown */
  --dropdown-radius: 0.1rem;
  --dropdown-item-radius: 0.1rem;
  --dropdown-highlight-bg: var(--brand-primary);
  --dropdown-highlight-text: var(--brand-secondary);

  /* Stacked layout */
  --stacked-layout-radius: 0.1rem;
  --stacked-layout-content-bg: #fff;
  --stacked-layout-page-bg: var(--brand-primary);

  /* Assessment form (question card) */
  --assessment-form-radius: 0.1rem;

  /* Navbar item */
  --navbar-item-radius: 0.1rem;
  --navbar-item-font-family: 'Barlow Condensed', sans-serif;
  --navbar-item-font-weight: 600;
  --navbar-item-text-color: #fff;
  --navbar-item-text-size: 1rem;
  --navbar-item-text-transform: uppercase;
  --navbar-item-bg-hover: color-mix(
    in oklch,
    var(--brand-secondary) 12%,
    transparent
  );
  --navbar-item-current-indicator-bg: var(--brand-secondary);
  /* --navbar-item-line-height */

  /* Pagination page (current page highlight) */
  --pagination-page-radius: 0.1rem;

  /* Flyout menu */
  --flyout-menu-radius: 0.1rem;
  --flyout-menu-button-radius: 0.1rem;
  --flyout-menu-button-icon-radius: 0.1rem;
  --flyout-menu-button-title-font-family: 'Barlow Condensed', sans-serif;
  --flyout-menu-button-title-font-weight: 700;
  --flyout-menu-button-title-text-size: 1rem;
  --flyout-menu-button-title-text-color: var(--brand-primary);
  --flyout-menu-button-title-text-transform: uppercase;
  /* --flyout-menu-button-title-line-height */
  --flyout-menu-button-text: var(--brand-primary);
  --flyout-menu-button-text-hover: var(--brand-primary);
  --flyout-menu-button-icon: var(--brand-primary);
  --flyout-menu-button-icon-hover: var(--brand-primary);
  --flyout-menu-button-bg-hover: color-mix(
    in oklch,
    var(--brand-primary) 8%,
    transparent
  );
  --flyout-menu-button-icon-bg: #fff;
  --flyout-menu-button-icon-bg-hover: var(--brand-secondary);

  /* Hover card */
  --hover-card-radius: 0.1rem;
  --hover-card-title-font-family: 'Barlow Condensed', sans-serif;
  --hover-card-title-font-weight: 800;
  --hover-card-title-text-size: 1.25rem;
  --hover-card-title-text-color: var(--brand-primary);
  --hover-card-title-text-transform: uppercase;
  /* --hover-card-title-text-align */
  /* --hover-card-title-line-height */

  /* Dialog */
  --dialog-radius: 0.1rem;
  --dialog-title-font-family: 'Barlow Condensed', sans-serif;
  --dialog-title-text-size: 1.5rem;
  --dialog-title-text-transform: uppercase;

  /* Personality profile – progress indicator (start/assessment) */
  --personality-profile-progress-indicator-bg: var(--brand-secondary);

  /* Personality profile – strengths intro text */
  --personality-profile-strengths-intro-text-align: center;
  /* --personality-profile-strengths-intro-text-transform */
  /* --personality-profile-strengths-intro-font-family */
  /* --personality-profile-strengths-intro-text-color */
  /* --personality-profile-strengths-intro-font-weight */
  /* --personality-profile-strengths-intro-text-size */
  /* --personality-profile-strengths-intro-line-height */

  /* Portal home – step card SVG illustrations */
  --portal-home-step-svg-primary: oklch(0.6239 0.1052 237.62);
  --portal-home-step-svg-secondary: var(--brand-secondary);

  /* Portal home – step card badge */
  --portal-home-step-badge-bg: #fff;
  --portal-home-step-badge-text: var(--brand-primary);
  --portal-home-step-badge-margin-x: auto;

  /* Portal home – step card complete */
  --portal-home-step-complete-bg: var(--brand-secondary);
  --portal-home-step-complete-title-color: var(--brand-primary);
  --portal-home-step-complete-description-color: var(--brand-primary);
  --portal-home-step-complete-button-bg: var(--brand-primary);
  --portal-home-step-complete-button-text: #fff;
  --portal-home-step-complete-button-icon: #fff;
  /* --portal-home-step-complete-border-color */

  /* Portal home – step card incomplete */
  --portal-home-step-incomplete-bg: var(--brand-primary);
  --portal-home-step-incomplete-title-color: var(--brand-secondary);
  --portal-home-step-incomplete-description-color: #fff;
  --portal-home-step-incomplete-button-bg: var(--brand-secondary);
  --portal-home-step-incomplete-button-text: var(--brand-primary);
  --portal-home-step-incomplete-button-icon: var(--brand-primary);
  /* --portal-home-step-incomplete-border-color */
}