/* ========================================================= */
/* Foundations                                                */
/* ========================================================= */

:root {
  /* Colors */
  --color-darkblue: #4661A9;
  --color-midblue: #657FBA;
  --color-darkgreen: #4D646E;
  --color-darkbrown: #665F57;
  --color-light-grey: #E2E5E9;
  --color-medium-grey: #CDCFD4;
  --color-dark-grey: #7B879D;
  --color-black: #000000;
  --color-white: #FFFFFF;
  --color-process-inactive: #FFAE79;
  --color-signal-green: #009101;
  --color-signal-yellow: #9C7A00;
  --color-signal-red: #9B3B2F;
  --color-font-dark: #414959;
  --color-font-light: #FFFFFF;
  --color-font-hyperlink: #FF6900;
  --color-background-purple: #373C4A;
  --color-background-purple-light: #656C7D;
  --color-transparent: transparent;

  /* Semantic component tokens: Cards */
  --surface-card: var(--color-light-grey);
  --surface-card-body: var(--color-light-grey);
  --surface-card-segment-neutral: var(--color-light-grey);
  --surface-card-group: var(--color-background-purple-light);
  --surface-card-transparent: var(--color-transparent);
  --surface-card-header-primary: var(--color-darkblue);
  --surface-card-header-alternative: var(--color-darkgreen);
  --surface-card-header-muted: var(--color-darkbrown);
  --divider-card-segment: var(--color-white);
  --text-card-header: var(--color-font-light);
  --text-card-body: var(--color-font-dark);
  --text-card-transparent: var(--color-font-light);
  --layout-card-body-content-justify: flex-start;
  --layout-card-segment-content-gap: var(--spacing-small);

  /* Semantic component tokens: Interactive elements */
  --surface-form-preview: var(--color-light-grey);
  --surface-control-default: var(--color-white);
  --surface-control-active: var(--color-white);
  --surface-control-inactive: var(--color-white);
  --surface-control-disabled: var(--color-white);
  --surface-button-active: var(--color-medium-grey);
  --surface-button-process: var(--color-font-hyperlink);
  --surface-button-process-inactive: var(--color-process-inactive);
  --surface-button-inactive: var(--color-light-grey);
  --surface-tab-selected: var(--color-dark-grey);
  --surface-tab-unselected: var(--color-white);
  --surface-tab-compact-background: var(--surface-form-preview);
  --surface-tab-compact-unselected: var(--color-medium-grey);
  --surface-input-clear: var(--color-medium-grey);
  --surface-toggle-track: var(--color-medium-grey);
  --surface-toggle-handle: var(--color-darkblue);
  --surface-menu-panel-portal: var(--color-light-grey);
  --surface-help-icon: var(--color-medium-grey);
  --surface-help-panel: var(--color-light-grey);
  --surface-pulldown-panel: var(--color-light-grey);
  --surface-activatable-remove: var(--surface-control-default);
  --surface-slider-track: var(--color-medium-grey);
  --surface-slider-progress: var(--color-dark-grey);
  --surface-slider-thumb: var(--color-dark-grey);
  --surface-checkbox-default: var(--color-white);
  --surface-checkbox-on-context: var(--color-white);
  --surface-radio-default: var(--color-white);
  --layout-pulldown-panel-padding-inline: var(--compact-interaction-padding-horizontal);
  --layout-pulldown-option-padding-inline: var(--compact-interaction-padding-horizontal);
  --layout-pulldown-padding-inline: var(--compact-interaction-padding-horizontal);
  --layout-pulldown-chevron-offset: var(--compact-interaction-padding-horizontal);
  --layout-tab-navigation-large-padding-inline: var(--interaction-padding-horizontal);
  --layout-pulldown-chevron-reserved-space: var(--spacing-large);
  --layout-pulldown-panel-form-mobile-width: 90%;
  --layer-pulldown-panel: var(--dimension-layer-pulldown-panel);
  --layout-multiselect-pulldown-panel-desktop-width: var(--dimension-multiselect-pulldown-panel-desktop-width);
  --layout-multiselect-pulldown-panel-mobile-width: var(--dimension-multiselect-pulldown-panel-mobile-width);
  --layout-multiselect-pulldown-label-column-width-fallback: max-content;
  --layout-input-label-width: var(--dimension-input-label-width);
  --layout-input-field-desktop-width: var(--dimension-input-field-desktop-width);
  --layout-input-field-max-width: var(--dimension-input-field-max-width);
  --layout-form-input-field-max-width: calc(var(--layout-input-field-max-width) + 100px);
  --layout-search-field-width: var(--dimension-search-field-width);
  --layout-mode-toggle-local-height: var(--compact-interaction-height);
  --layout-mode-toggle-local-width-factor: 3;
  --layout-mode-toggle-width: calc(var(--interaction-height) * 3.5);
  --layout-help-panel-width: calc(var(--interaction-height) * 8);
  --text-control-default: var(--color-font-dark);
  --text-control-disabled: var(--color-dark-grey);
  --text-button-process: var(--color-font-light);
  --text-tab-selected: var(--color-font-light);
  --text-tab-unselected: var(--color-dark-grey);
  --text-toggle-label-active: var(--color-font-light);
  --text-menu-link-portal: var(--color-font-dark);
  --text-help-icon: var(--color-font-dark);
  --text-help-panel: var(--color-font-dark);
  --text-activatable-remove: var(--text-control-default);
  --text-hyperlink: var(--color-font-hyperlink);
  --icon-pulldown-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M2 2l4 4 4-4' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='square' stroke-linejoin='miter'/%3E%3C/svg%3E");
  --icon-sandwich-line-portal: var(--color-font-dark);
  --icon-radio-mark: var(--color-font-dark);

  /* Semantic component tokens: Charts */
  --surface-score-bar-track: var(--color-medium-grey);
  --surface-chart-area: var(--color-light-grey);
  --chart-value-positive: var(--color-signal-green);
  --chart-value-neutral: var(--color-signal-yellow);
  --chart-value-negative: var(--color-signal-red);
  --chart-value-primary: var(--color-darkblue);
  --chart-value-reference: var(--color-medium-grey);
  --chart-grid-line: var(--color-medium-grey);
  --chart-axis-line: var(--color-font-dark);
  --chart-marker-line: var(--color-font-dark);
  --chart-median-line: var(--color-font-dark);
  --text-chart-default: var(--color-font-dark);
  --text-score-state-positive: var(--chart-value-positive);
  --layout-score-bar-item-columns: max-content 1fr;
  --layout-score-bar-item-gap: var(--spacing-large);
  --layout-score-bar-item-single-score-columns: max-content 1fr max-content;

  /* Semantic component tokens: Data display */
  --surface-data-table: var(--color-light-grey);
  --surface-data-table-header: var(--color-light-grey);
  --surface-data-table-cell: var(--color-light-grey);
  --surface-data-table-help-icon: var(--color-medium-grey);

  --text-data-table-default: var(--color-font-dark);
  --text-data-table-warning: var(--color-signal-yellow);
  --text-data-table-help-icon: var(--color-font-dark);

  /* Semantic component tokens: Typography */
  --text-typography-preview: var(--color-font-light);
  --layout-preview-align-items: flex-start;

  /* Semantic pattern tokens: Portal header */
  --surface-portal-header: var(--color-darkblue);
  --surface-portal-header-tab: var(--color-midblue);
  --surface-portal-header-tab-active: var(--color-light-grey);
  --text-portal-header-brand: var(--color-font-light);
  --font-size-portal-header-brand: calc(var(--font-size-brand) * 1.1);
  --text-portal-header-tab: var(--color-font-light);
  --text-portal-header-tab-active: var(--color-font-dark);
  --layout-page-content-inset-inline: var(--card-segment-padding-horizontal);
  --surface-options-row: var(--color-light-grey);
  --surface-options-row-control: var(--surface-control-default);
  --surface-options-row-control-selected: var(--surface-control-active);
  --surface-options-row-input-clear: var(--surface-input-clear);
  --surface-options-row-toggle-track: var(--surface-toggle-track);
  --surface-options-row-toggle-handle: var(--surface-toggle-handle);
  --surface-options-row-help-icon: var(--surface-help-icon);
  --surface-options-row-help-panel: var(--surface-help-panel);
  --divider-options-row-mobile: var(--color-white);
  --text-options-row-default: var(--text-control-default);
  --text-options-row-placeholder: var(--text-control-disabled);
  --text-options-row-help-icon: var(--color-font-light);
  --text-options-row-help-panel: var(--text-help-panel);
  --text-options-row-description: var(--color-font-light);
  --layout-options-row-margin-top: var(--spacing-small);
  --layout-options-row-main-gap: var(--spacing-large);
  --layout-options-row-group-gap: var(--spacing-small);
  --layout-options-row-mode-toggle-width: var(--dimension-options-row-mode-toggle-width);
  --layout-options-row-help-panel-width: var(--dimension-options-row-help-panel-width);
  --layout-object-card-min-width: var(--dimension-object-card-min-width);
  --layout-object-card-max-width: var(--dimension-object-card-max-width);
  --layout-object-card-height: var(--dimension-object-card-height);
  --layout-object-card-content-grow: var(--dimension-object-card-content-grow);
  --layout-object-card-mobile-width: var(--dimension-object-card-mobile-width);
  --layout-object-card-mobile-height: var(--dimension-object-card-mobile-height);
  --layout-object-card-desktop-breakpoint: var(--dimension-object-card-desktop-breakpoint);
  --layout-object-group-card-min-width: var(--dimension-object-group-card-min-width);
  --layout-object-group-card-max-width: var(--dimension-object-group-card-max-width);
  --surface-object-card-lower-segment: var(--color-white);
  --text-company-card-data-negative: var(--chart-value-negative);
  --text-company-card-moat-neutral: var(--chart-value-neutral);
  --layout-company-card-analysis-gap-after-moat: var(--spacing-large);
  --surface-navigation-card: var(--color-white);
  --surface-navigation-card-body: var(--color-white);
  --surface-content-block-card-title: var(--color-light-grey);
  --surface-content-block-card-content: var(--color-white);
  --layout-content-cards-group-gap: var(--spacing-small);
  --surface-card-list-drawer: var(--color-background-purple);
  --text-content-block-card-title: var(--color-font-dark);
  --text-content-block-card-content: var(--color-font-dark);
  --text-card-list-drawer: var(--color-font-dark);
  --layout-card-list-drawer-width: var(--dimension-card-list-drawer-width);
  --surface-vsf-drawer-object-card-header: var(--color-darkblue);
  --surface-vsf-drawer-object-card-body: var(--color-darkblue);
  --text-vsf-drawer-object-card-heading: var(--color-font-light);
  --text-vsf-drawer-object-card-body: var(--color-font-light);
  --layout-vsf-drawer-object-card-column-gap: var(--spacing-large);
  --surface-text-layout-preview: var(--color-light-grey);
  --layout-text-layout-column-gap: var(--spacing-large);
  --layout-text-layout-two-column-columns: repeat(2, minmax(0, 1fr));
  --layout-text-layout-three-column-columns: repeat(3, minmax(0, 1fr));
  --text-align-text-layout-column-left: left;
  --text-align-text-layout-column-center: center;
  --text-align-text-layout-column-right: right;
  --surface-delete-confirmation-overlay: var(--color-light-grey);
  --surface-delete-confirmation-target-dim-overlay: var(--color-black);
  --text-delete-confirmation-overlay: var(--color-font-dark);
  --layout-delete-confirmation-target-max-width: 35rem;
  --layout-delete-confirmation-overlay-width-factor: 0.8;
  --layout-delete-confirmation-overlay-offset-block-start: var(--spacing-large);
  --layout-delete-confirmation-content-gap: var(--spacing-small);
  --layout-delete-confirmation-actions-gap: var(--spacing-small);
  --layout-delete-confirmation-actions-offset-block-start: var(--spacing-large);
  --layout-delete-confirmation-label-width: var(--dimension-input-label-width);
  --layout-delete-confirmation-target-dim-opacity: 0.5;
  --layer-delete-confirmation-overlay: 50;

  /* Typography */
  --font-family-base: "Open Sans", sans-serif;
  --font-size-base: 1rem;
  --font-size-small: 0.8rem;
  --font-size-brand: 1.6rem;
  --font-size-h1: 1.5rem;
  --font-size-h2: 1.25rem;
  --font-weight-regular: 400;
  --font-weight-semibold: 600;
  --line-height-base: 1.5;

  /* Spacing */
  --spacing-small: 0.3rem;
  --spacing-large: 1rem;
  --card-segment-padding-vertical: 0.75rem;
  --card-segment-padding-horizontal: 1rem;
  --card-segment-padding-horizontal-mobile: 0.5rem;
  --interaction-padding-vertical: 0.25rem;
  --interaction-padding-horizontal: 1rem;

  /* Dimensions */
  --interaction-height: 2rem;
  --compact-interaction-height: 1.5rem;
  --compact-interaction-padding-vertical: 0.15rem;
  --compact-interaction-padding-horizontal: 0.75rem;
  --small-interaction-element-size: 1.25rem;
  --disabled-opacity: 0.7;
  --sandwich-line-width: 1.25rem;
  --sandwich-line-height: 4px;
  --sandwich-line-gap: 3px;
  --score-bar-height: 1rem;
  --score-marker-width: 6px;
  --score-marker-height: calc(var(--score-bar-height) + 2px);
  --chart-height-bar: 24rem;
  --chart-height-line: 18rem;
  --chart-axis-label-column-width: 4rem;
  --chart-axis-label-gap: 5px;
  --chart-grid-line-width: 1px;
  --chart-line-width: 2px;
  --chart-label-position-default: 50%;
  --dimension-object-card-min-width: 395px;
  --dimension-object-card-max-width: 600px;
  --dimension-object-card-height: 600px;
  --dimension-object-card-content-grow: 1;
  --dimension-object-card-mobile-width: 100%;
  --dimension-object-card-mobile-height: auto;
  --dimension-object-card-desktop-breakpoint: 768px;
  --dimension-object-group-card-min-width: 550px;
  --dimension-object-group-card-max-width: 800px;
  --dimension-input-label-width: 9rem;
  --dimension-input-field-desktop-width: 400px;
  --dimension-input-field-max-width: 600px;
  --dimension-search-field-width: 15.3rem;
  --dimension-layer-pulldown-panel: 40;
  --dimension-multiselect-pulldown-panel-desktop-width: 500px;
  --dimension-multiselect-pulldown-panel-mobile-width: 80vw;
  --dimension-options-row-mode-toggle-width: 7rem;
  --dimension-options-row-help-panel-width: 16rem;
  --dimension-card-list-drawer-width: 40%;
  --dimension-slider-track-height: 6px;
  --dimension-slider-thumb-size: 22px;
  --dimension-slider-thumb-offset-top: -8px;
  --radius-slider-track: 999px;

  /* Radius */
  --radius-card: 8px;
  --radius-graph-bar: 2px;
  --radius-interaction: 4px;

  /* Shadows */
  --shadow-none: none;
  --shadow-overlay: 0 10px 24px rgba(0, 0, 0, 0.22);
  --shadow-interaction-inset: none;

  /* Borders */
  --border-none: none;
  --border-control: none;

  /* Runtime defaults */
  --layout-object-card-shared-width: auto;
  --sg-slider-progress: 0%;
  --chart-label-position: var(--chart-label-position-default);
}