@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,opsz,wght@0,18..144,300..900;1,18..144,300..900&family=Sofia+Sans:ital,wght@0,1..1000;1,1..1000&display=swap');

:root {
  --brand-primary: oklch(0.2254 0.04 230.78);
  --brand-primary-300: oklch(0.544 0.1322 243.28);
  --brand-secondary-300: oklch(0.5583 0.1819 37.62);
  --brand-neutral-50: #444;

  /* Auth (sign-in / sign-up) page */
  --auth-page-bg: var(--brand-primary-300);
  --auth-page-bg-dark: var(--brand-primary-300);
  --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: 'merriweather';
  --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-300);
  /* Auth page panel heading (optional; component defaults when unset) */
  --auth-page-heading-font-family: 'merriweather';
  --auth-page-heading-font-weight: 800;
  --auth-page-heading-text-size: 5rem;
  --auth-page-heading-line-height: 1;
  --auth-page-heading-text-color: var(--brand-primary);
  --auth-page-heading-text-align: left;
  /* --auth-page-heading-text-transform: uppercase; */
  --auth-page-heading-accent-color: var(--brand-primary-300);
  /* Auth page panel subheading */
  --auth-page-subheading-font-family: 'sofia sans';
  --auth-page-subheading-text-size: 1.25rem;
  --auth-page-subheading-line-height: 1.25;
  --auth-page-subheading-text-color: var(--brand-primary);
  --auth-page-subheading-text-align: left;
  /* --auth-page-subheading-text-transform: uppercase; */
  --auth-page-subheading-accent-color: var(--brand-secondary-300);

  /* Button */
  --button-focus-ring: var(--brand-primary);
  --button-bg: var(--brand-primary-300);
  --button-text-transform: uppercase;
  /* --button-font-weight */
  /* --button-radius */
  /* --button-font-family */
  /* --button-text-size*/
  /* --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-primary-300);
  --program-card-save-button-icon: color-mix(
    in srgb,
    var(--brand-secondary-300),
    transparent 50%
  );
  /* --program-card-tag-text-font-family */
  --program-card-tag-text-color: #fff;
  --program-card-tag-icon-fill: var(--brand-secondary-300);
  /* --program-card-tag-text-transform */
  --program-card-cta-text: #fff;
  --program-card-cta-button-bg-hover: color-mix(
    in oklch,
    var(--brand-secondary-300) 12%,
    transparent
  );
  /* --program-card-cta-icon */
  --program-card-badge-bg: var(--brand-secondary-300);
  --program-card-badge-text: #fff;
  --program-card-badge-margin-x: auto;
  --program-card-action-button-bg: var(--brand-secondary-300);
  --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-300) 12%,
    transparent
  );

  --program-card-view-program-button: var(--brand-secondary-300);

  --program-card-why-fit-button-bg: #1f150c;
  --program-card-why-fit-button-text: #fff;
  --program-card-why-fit-button-bg-hover: color-mix(
    in oklch,
    var(--brand-secondary) 12%,
    transparent
  );
  /* ASSESSMENT */
  /* Program detail (single program page) */
  --program-detail-badges-justify-content: center;
  /* --program-detail-badges-align-items */
  --program-detail-meta-icon-fill: var(--brand-secondary-300);
  --program-detail-meta-text-color: #99c9ff;

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

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

  /* Chart container */
  --chart-container-radius: 0.1rem;
  --chart-container-bg: var(--brand-primary);
  --chart-radius: 0.1rem;
  --chart-bg: #fff;

  /* Chart subheading (titles above chart descriptions) */
  /* --chart-subheading-font-family */
  --chart-subheading-text-align: center;
  --chart-subheading-text-color: #fff;
  --chart-subheading-text-size: 1.5rem;
  --chart-subheading-text-transform: uppercase;
  /* --chart-subheading-font-weight */
  /* --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 */
  --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: 'merriweather';
  --heading-font-weight: 800;
  /* --heading-text-size: 2.5rem; */
  --heading-text-align: center;
  --heading-text-color: var(--brand-primary);
  /* --heading-text-transform */

  /* Subheading */
  --subheading-text-size: 1.25rem;
  --subheading-font-weight: 300;
  --subheading-text-align: center;
  --subheading-font-family: 'sofia sans';
  /* --subheading-text-transform*/
  /* --subheading-text-color*/
  /* --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 */
  --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-text-color: #fff;
  --navbar-item-bg-hover: color-mix(
    in oklch,
    var(--brand-secondary-300) 32%,
    transparent
  );
  --navbar-item-current-indicator-bg: var(--brand-secondary-300);
  /* --navbar-item-radius */
  /* --navbar-item-font-family */
  /* --navbar-item-font-weight */
  /* --navbar-item-text-size */
  /* --navbar-item-text-transform */
  /* --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 */
  --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-primary-300);

  /* Hover card */
  --hover-card-radius: 0.1rem;
  /* --hover-card-title-font-family */
  --hover-card-title-font-weight: 800;
  --hover-card-title-text-size: 1.25rem;
  --hover-card-title-text-color: var(--brand-neutral-50);
  --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: 'sofia sans';
  --dialog-title-text-size: 1.5rem;
  /* --dialog-title-text-transform */

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

  /* 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: var(--brand-secondary-300);
  --portal-home-step-svg-secondary: var(--brand-primary-300);

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

  /* Portal home – step card complete */
  --portal-home-step-complete-bg: var(--brand-primary);
  --portal-home-step-complete-title-color: #fff;
  --portal-home-step-complete-description-color: #fff;
  --portal-home-step-complete-button-bg: var(--brand-primary-300);
  --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-300);
  --portal-home-step-incomplete-title-color: #fff;
  --portal-home-step-incomplete-description-color: #fff;
  --portal-home-step-incomplete-button-bg: var(--brand-secondary-300);
  --portal-home-step-incomplete-button-text: #fff;
  --portal-home-step-incomplete-button-icon: #fff;
  /* --portal-home-step-incomplete-border-color */
}