/* Root theme variables */
:root {
  --vpt-theme-headline-font: "Century Gothic", sans-serif;
  --vpt-theme-header-background-color: #0077C4;
  --vpt-theme-header-text-color: #ffffff;
  --vpt-theme-banner-background-color: #0077C4;
  --vpt-theme-banner-text-color: #ffffff;
  --vpt-theme-footer-background-color: #0f2942;
  --vpt-theme-footer-text-color: #e2e8f0;
  --vpt-theme-primary-color: #00A0E2;
  --vpt-theme-on-primary-color: #ffffff;
  --vpt-theme-roundness: 6px;

  
	h1, h2 {
  		font-weight: 600 !important;
	};
  
	h3, h4, h5, h6 {
    	font-weight: 500 !important;
	};
  
	.header__navigation--logo a img {
		max-height: 50px;
		min-width: 40px;
	};
  
  	.vp-tree-item {
      border-radius: 5px;
  	}
}

/* K15t Color System */
:root {
  /* Brand Colors */
  --K15t-color-brand-50: #e6f7ff;
  --K15t-color-brand-100: #bae7ff;
  --K15t-color-brand-200: #91d5ff;
  --K15t-color-brand-300: #69c0ff;
  --K15t-color-brand-400: #40a9ff;
  --K15t-color-brand-500: #00A0E2;
  --K15t-color-brand-600: #0083be;
  --K15t-color-brand-700: #006599;
  --K15t-color-brand-800: #004d75;
  --K15t-color-brand-900: #003450;
  
  /* Neutral Colors */
  --K15t-color-neutral-0: #ffffff;
  --K15t-color-neutral-25: #f9fafb;
  --K15t-color-neutral-50: #f0f2f5;
  --K15t-color-neutral-75: #e6e8eb;
  --K15t-color-neutral-100: #dcdfe3;
  --K15t-color-neutral-200: #c0c6cc;
  --K15t-color-neutral-300: #a3acb6;
  --K15t-color-neutral-400: #8792a0;
  --K15t-color-neutral-500: #6b788a;
  --K15t-color-neutral-600: #566175;
  --K15t-color-neutral-700: #424a5f;
  --K15t-color-neutral-800: #2d334a;
  --K15t-color-neutral-900: #1a1d35;
  --K15t-color-neutral-1000: #080a20;
  
  /* Semantic Colors */
  --K15t-color-blue-100: #e6f7ff;
  --K15t-color-blue-400: #40a9ff;
  --K15t-color-blue-500: #00A0E2;
  --K15t-color-blue-600: #0083be;
  
  --K15t-color-red-100: #fff1f0;
  --K15t-color-red-400: #ff4d4f;
  --K15t-color-red-700: #a8071a;
  
  --K15t-color-green-100: #f6ffed;
  --K15t-color-green-400: #52c41a;
  --K15t-color-green-900: #135200;
  
  --K15t-color-yellow-100: #fffbe6;
  --K15t-color-yellow-400: #faad14;
}

/* K15t Foreground & Background */
:root {
  /* Foreground */
  --K15t-foreground: var(--K15t-color-neutral-900);
  --K15t-foreground-subtle: var(--K15t-color-neutral-600);
  --K15t-foreground-brand: var(--K15t-color-brand-500);
  --K15t-foreground-on-brand: var(--K15t-color-brand-700);
  --K15t-foreground-on-brand-strong: var(--K15t-color-neutral-0);
  
  /* Background */
  --K15t-background-neutral: var(--K15t-color-neutral-50);
  --K15t-background-neutral-hovered: var(--K15t-color-neutral-100);
  --K15t-background-neutral-pressed: var(--K15t-color-neutral-200);
  --K15t-background-neutral-subtle: var(--K15t-color-neutral-0);
  --K15t-background-neutral-subtle-hovered: var(--K15t-color-neutral-50);
  --K15t-background-brand: var(--K15t-color-brand-50);
  --K15t-background-brand-hovered: var(--K15t-color-brand-600);
  --K15t-background-brand-selected: #e2e8f0;
  --K15t-background-input: var(--K15t-color-neutral-0);
  
  /* Borders */
  --K15t-border-neutral: var(--K15t-color-neutral-200);
  --K15t-border-neutral-strong: var(--K15t-color-neutral-400);
  --K15t-border-brand: var(--K15t-color-brand-500);
  --K15t-border-input: var(--K15t-color-neutral-300);
  --K15t-border-input-selected: var(--K15t-color-brand-500);
  
  /* Link */
  --K15t-link: var(--K15t-color-brand-500);
  
  /* Surface */
  --K15t-surface: var(--K15t-color-neutral-0);
  --K15t-surface-raised: var(--K15t-color-neutral-25);
  --K15t-surface-overlay: var(--K15t-color-neutral-0);
  
  /* Typography */
  --K15t-font-family-headline: "Century Gothic", sans-serif;
  --K15t-font-family-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  --K15t-font-family-code: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  --K15t-font-weight-bold: 700;
  
  /* Radius */
  --K15t-radius-factor: 1;
  --K15t-radius-small: calc(var(--K15t-radius-factor) * 1px);
  --K15t-radius-medium: calc(var(--K15t-radius-factor) * 1.5px);
}

/* Component Styles */
[data-vp-component="header"] {
  --foreground: var(--vpt-theme-header-text-color);
  --background: var(--vpt-theme-header-background-color);
  --border: #0077C4;
}

[data-vp-component="footer"] {
  --foreground: var(--vpt-theme-footer-text-color);
  --background: var(--vpt-theme-footer-background-color);
  --border: var(--K15t-border-neutral);
}

[data-vp-component="banner"] {
  --foreground: var(--vpt-theme-banner-text-color);
  --background: var(--vpt-theme-banner-background-color);
}

[data-vp-component="search-bar"] {
  --height: 48px;
  --border-width: 1px;
  --border-radius: 40px;
}

[data-vp-component="search-bar"][data-vp-variant="large"] {
  --height: 56px;
}

[data-vp-component="search-suggestion"] {
  --text-color-option: var(--K15t-foreground);
  --text-color-option-active: var(--K15t-foreground-brand);
  --background-color-panel: var(--K15t-surface-overlay);
  --background-color-option: var(--K15t-background-neutral-subtle);
  --background-color-option-active: var(--K15t-background-neutral-subtle-hovered);
  --accent-color-option-active: var(--K15t-color-brand-500);
  --border-color-panel: var(--K15t-border-neutral);
  --shadow-panel: 0 4px 12px rgba(0, 0, 0, 0.1);
}

[data-vp-component="toc"] {
  --foreground-color: var(--K15t-foreground);
  --foreground-color-selected: var(--K15t-color-brand-700);
  --background-color: var(--K15t-background-neutral-subtle);
  --background-color-selected: var(--K15t-color-brand-50);
  --border-color: var(--K15t-border-neutral);
}

[data-vp-component="dropdown"] {
  --text-size: 14px;
  --text-color-button: var(--K15t-foreground);
  --text-color-option: var(--K15t-foreground);
  --background-color-button: var(--K15t-background-neutral-subtle);
  --background-color-options: var(--K15t-surface-overlay);
  --background-color-option-active: var(--K15t-background-neutral-subtle-hovered);
  --border-radius-button: var(--K15t-radius-small);
  --border-radius-options: var(--K15t-radius-small);
  --options-offset: 4px;
}

[data-vp-component="dropdown"][data-vp-variant="outline"] {
  --text-color-button-active: var(--K15t-foreground-brand);
  --background-color-button-active: var(--K15t-background-neutral-subtle-hovered);
  --border-color-button: var(--K15t-border-neutral);
}

[data-vp-component="dropdown"][data-vp-variant="searchbar"] {
  --text-color-button-active: var(--K15t-foreground-brand);
  --background-color-button-active: var(--K15t-background-neutral-subtle-hovered);
}