@gainsight-hub/design-tokens 0.1.0

package/dist/styles.css

@@ -0,0 +1,457 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+
+  /* ───────────────────────────────────────────────────────────────────────── */
+  /**
+   * THEME VARS
+   * Overrideable primitive roots — one set per theme.
+   * Override via [data-theme="..."] to swap the full primitive scale.
+   */
+  /* ───────────────────────────────────────────────────────────────────────── */
+
+  /* Brand scale */
+  --theme-brand-100: #E9F2FF;
+  --theme-brand-200: #CCE0FF;
+  --theme-brand-300: #85B8FF;
+  --theme-brand-400: #579DFF;
+  --theme-brand-500: #388BFF;
+  --theme-brand-600: #1D7AFC;
+  --theme-brand-700: #0C66E4;
+  --theme-brand-800: #0055CC;
+  --theme-brand-900: #09326C;
+  --theme-brand-1000: #1C2B41;
+
+  /* Neutral scale */
+  --theme-neutral-0: #FFFFFF;
+  --theme-neutral-100: #FAFAFA;
+  --theme-neutral-200: #F4F5F6;
+  --theme-neutral-300: #DEDFE2;
+  --theme-neutral-400: #B8BBC2;
+  --theme-neutral-500: #8D919B;
+  --theme-neutral-600: #7B808E;
+  --theme-neutral-700: #696E7C;
+  --theme-neutral-800: #4F5663;
+  --theme-neutral-900: #3B4254;
+  --theme-neutral-1000: #2B3346;
+
+  /* ───────────────────────────────────────────────────────────────────────── */
+  /**
+   * PRIMITIVE TOKENS
+   * Raw scale values — not intended for direct use in application code.
+   * Reference semantic tokens instead.
+   */
+  /* ───────────────────────────────────────────────────────────────────────── */
+
+  /* Color — Brand */
+  --color-brand-100: var(--theme-brand-100, #E9F2FF);
+  --color-brand-200: var(--theme-brand-200, #CCE0FF);
+  --color-brand-300: var(--theme-brand-300, #85B8FF);
+  --color-brand-400: var(--theme-brand-400, #579DFF);
+  --color-brand-500: var(--theme-brand-500, #388BFF);
+  --color-brand-600: var(--theme-brand-600, #1D7AFC);
+  --color-brand-700: var(--theme-brand-700, #0C66E4);
+  --color-brand-800: var(--theme-brand-800, #0055CC);
+  --color-brand-900: var(--theme-brand-900, #09326C);
+  --color-brand-1000: var(--theme-brand-1000, #1C2B41);
+
+  /* Color — Neutral */
+  --color-neutral-a100: rgba(43, 51, 70, 0.04);
+  --color-neutral-a200: rgba(43, 51, 70, 0.08);
+  --color-neutral-a300: rgba(43, 51, 70, 0.16);
+  --color-neutral-a400: rgba(43, 51, 70, 0.32);
+  --color-neutral-a500: rgba(43, 51, 70, 0.48);
+  --color-neutral-0: var(--theme-neutral-0, #FFFFFF);
+  --color-neutral-100: var(--theme-neutral-100, #FAFAFA);
+  --color-neutral-200: var(--theme-neutral-200, #F4F5F6);
+  --color-neutral-300: var(--theme-neutral-300, #DEDFE2);
+  --color-neutral-400: var(--theme-neutral-400, #B8BBC2);
+  --color-neutral-500: var(--theme-neutral-500, #8D919B);
+  --color-neutral-600: var(--theme-neutral-600, #7B808E);
+  --color-neutral-700: var(--theme-neutral-700, #696E7C);
+  --color-neutral-800: var(--theme-neutral-800, #4F5663);
+  --color-neutral-900: var(--theme-neutral-900, #3B4254);
+  --color-neutral-1000: var(--theme-neutral-1000, #2B3346);
+
+  /* Color — Blue */
+  --color-blue-100: #e9f2ff;
+  --color-blue-200: #cce0ff;
+  --color-blue-300: #85b8ff;
+  --color-blue-400: #579dff;
+  --color-blue-500: #388bff;
+  --color-blue-600: #1d7afc;
+  --color-blue-700: #0c66e4;
+  --color-blue-800: #0055cc;
+  --color-blue-900: #09326c;
+  --color-blue-1000: #1c2b41;
+
+  /* Color — Green */
+  --color-green-100: #dcffeb;
+  --color-green-200: #baf3d2;
+  --color-green-300: #7ee2a6;
+  --color-green-400: #4bce7f;
+  --color-green-500: #2abb62;
+  --color-green-600: #22a052;
+  --color-green-700: #1f8444;
+  --color-green-800: #216e3d;
+  --color-green-900: #164b29;
+  --color-green-1000: #1c3324;
+
+  /* Color — Red */
+  --color-red-100: #ffeceb;
+  --color-red-200: #ffd3d2;
+  --color-red-300: #fd9391;
+  --color-red-400: #f86a68;
+  --color-red-500: #f15050;
+  --color-red-600: #e23d3d;
+  --color-red-700: #c92c2f;
+  --color-red-800: #ae2426;
+  --color-red-900: #5d1a1c;
+  --color-red-1000: #421f21;
+
+  /* Color — Yellow */
+  --color-yellow-100: #fff7d6;
+  --color-yellow-200: #f8e6a0;
+  --color-yellow-300: #f5cd47;
+  --color-yellow-400: #e2b203;
+  --color-yellow-500: #cf9f02;
+  --color-yellow-600: #b38600;
+  --color-yellow-700: #946f00;
+  --color-yellow-800: #7f5f01;
+  --color-yellow-900: #533f04;
+  --color-yellow-1000: #332e1b;
+
+  /* Typography */
+  --font-family-sans: Roboto;
+  --font-family-mono: Roboto Mono;
+  --font-weight-regular: 400;
+  --font-weight-medium: 500;
+  --font-weight-bold: 700;
+  --font-size-100: 0.75rem;
+  --font-size-200: 0.875rem;
+  --font-size-300: 1rem;
+  --font-size-400: 1.25rem;
+  --font-size-500: 1.5rem;
+  --font-size-600: 1.75rem;
+  --font-size-700: 2rem;
+  --line-height-ratio-tight: 1.25;
+  --line-height-ratio-relaxed: 1.5;
+  --line-height-grid-100: 1rem;
+  --line-height-grid-200: 1.25rem;
+  --line-height-grid-300: 1.5rem;
+  --line-height-grid-400: 1.75rem;
+  --line-height-grid-500: 2rem;
+  --line-height-grid-600: 2.25rem;
+  --line-height-grid-700: 2.5rem;
+
+  /* Spacing */
+  --space-0: 0px;
+  --space-100: 8px;
+  --space-125: 12px;
+  --space-200: 16px;
+  --space-250: 20px;
+  --space-300: 24px;
+  --space-400: 32px;
+  --space-500: 40px;
+  --space-600: 48px;
+  --space-800: 64px;
+  --space-1000: 80px;
+  --space-025: 2px;
+  --space-050: 4px;
+  --space-075: 6px;
+
+  /* Shape */
+  --border-width-100: 1px;
+  --border-width-200: 2px;
+  --radius-100: 8px;
+  --radius-150: 12px;
+  --radius-200: 16px;
+  --radius-025: 2px;
+  --radius-050: 4px;
+  --radius-full: 9999px;
+
+  /* Shadow */
+  --shadow-100: 0px 2px 4px -2px rgba(0, 0, 0, 0.1), 0px 4px 6px -1px rgba(0, 0, 0, 0.1);
+  --shadow-200: 0px 4px 6px -4px rgba(0, 0, 0, 0.1), 0px 10px 15px -3px rgba(0, 0, 0, 0.1);
+  --shadow-300: 0px 8px 10px -6px rgba(0, 0, 0, 0.1), 0px 20px 25px -5px rgba(0, 0, 0, 0.1);
+
+  /* ───────────────────────────────────────────────────────────────────────── */
+  /**
+   * SEMANTIC TOKENS
+   * Purposeful, context-aware aliases — use these in application code.
+   * Each token expresses intent (action, surface, content) not raw scale.
+   */
+  /* ───────────────────────────────────────────────────────────────────────── */
+
+  /* Color — Action */
+  --color-action-destructive-default: var(--color-red-700, #c92c2f); /** color used for actions that perform irreversible or potentially harmful operations */
+  --color-action-destructive-hover: var(--color-red-800, #ae2426); /** color used when a destructive action is hovered */
+  --color-action-destructive-pressed: var(--color-red-900, #5d1a1c); /** color used when a destructive action is actively pressed */
+  --color-action-primary-default: var(--color-brand-700, #0C66E4); /** default color used for the most prominent call-to-action in the interface */
+  --color-action-primary-hover: var(--color-brand-800, #0055CC); /** color used when a primary action is hovered */
+  --color-action-primary-pressed: var(--color-brand-900, #09326C); /** color used when a primary action is actively pressed */
+  --color-action-neutral-default: var(--color-neutral-0, #FFFFFF); /** color used for less prominent actions that support the primary action */
+  --color-action-neutral-hover: var(--color-neutral-100, #FAFAFA); /** color used when a secondary action is hovered */
+  --color-action-neutral-pressed: var(--color-neutral-200, #F4F5F6); /** color used when a secondary action is actively pressed */
+
+  /* Color — Surface */
+  --color-surface-page: var(--color-neutral-100, #FAFAFA); /** application canvas background used behind all UI surfaces */
+  --color-surface-default: var(--color-neutral-0, #FFFFFF); /** default container surface for standard UI sections (cards, panels, content areas) */
+  --color-surface-muted: var(--color-neutral-200, #F4F5F6); /** sub-surface used inside containers to visually group secondary areas (e.g., comment/reply bubbles) */
+  --color-surface-disabled: var(--color-neutral-200, #F4F5F6); /** background of disabled interactive elements such as inputs, buttons, or selection controls */
+  --color-surface-overlay: var(--color-neutral-0, #FFFFFF); /** elevated surface for overlays and floating layers (modals, dropdowns, popovers). */
+  --color-surface-inverse: var(--color-neutral-1000, #2B3346); /** color used for inverse surfaces such as tooltips and high-contrast floating UI */
+
+  /* Color — Content */
+  --color-content-default: var(--color-neutral-1000, #2B3346); /** default color used for primary body text and high-emphasis content */
+  --color-content-subtle: var(--color-neutral-800, #4F5663); /** color used for secondary text such as helper text, metadata, or supporting information */
+  --color-content-subtlest: var(--color-neutral-700, #696E7C); /** color used for low-emphasis text such as placeholders or less important UI copy */
+  --color-content-heading-default: var(--color-neutral-1000, #2B3346); /** default color used for section and component headings */
+  --color-content-heading-hero: var(--color-neutral-0, #FFFFFF); /** color used for prominent page-level headings displayed on hero or banner areas */
+  --color-content-inverse: var(--color-neutral-0, #FFFFFF); /** color used for text displayed on high-contrast or brand-colored backgrounds */
+  --color-content-disabled: var(--color-neutral-400, #B8BBC2); /** color used for text on disabled elements or unavailable content */
+
+  /* Color — Line */
+  --color-line-default: var(--color-neutral-300, #DEDFE2); /** default border and divider color used for standard UI boundaries, separators, and component outlines */
+  --color-line-disabled: var(--color-neutral-300, #DEDFE2); /** border and divider color used for disabled components or non-interactive states where visual emphasis is reduced */
+
+  /* Color — Status */
+  --color-status-success-bold: var(--color-green-700, #1f8444); /** high-emphasis color used to communicate successful outcomes or confirmations */
+  --color-status-information-bold: var(--color-blue-700, #0c66e4); /** high-emphasis color used to indicate errors or critical issues */
+  --color-status-danger-bold: var(--color-red-700, #c92c2f); /** high-emphasis color used for neutral informational messages */
+
+  /* Color — Link */
+  --color-link-default: var(--color-brand-700, #0C66E4); /** default color used for interactive text links */
+  --color-link-hover: var(--color-brand-800, #0055CC); /** color used for interactive text links on hover */
+
+  /* Color — Focus */
+  --color-focus-ring: var(--color-blue-500, #388bff); /** default color used for focus rings on interactive elements */
+
+  /* Color — Overlay */
+  --color-overlay-backdrop: var(--color-neutral-a500, rgba(43, 51, 70, 0.48)); /** semi-transparent color displayed behind modals to obscure background content */
+  --color-overlay-interactive-hover: var(--color-neutral-a100, rgba(43, 51, 70, 0.04)); /** overlay color applied to interactive elements to indicate a hover state */
+  --color-overlay-interactive-pressed: var(--color-neutral-a200, rgba(43, 51, 70, 0.08)); /** overlay color applied to interactive elements to indicate an active or pressed state */
+
+  /* Color — Skeleton */
+  --color-skeleton-subtle: var(--color-neutral-a100, rgba(43, 51, 70, 0.04)); /** highlight color used in animated skeleton states to simulate loading progress */
+  --color-skeleton-default: var(--color-neutral-200, #F4F5F6); /** base color used for loading placeholders while content is being fetched */
+
+  /* Color — Community */
+  --color-community-answered: var(--color-green-700, #1f8444); /** color used to indicate that a question or thread has received an accepted answer */
+  --color-community-unanswered: var(--color-neutral-700, #696E7C); /** color used to indicate that a question or thread has not yet received a response */
+  --color-community-highlighted: var(--color-brand-700, #0C66E4); /** color used to highlight content that is featured or editorially promoted */
+  --color-community-pinned: var(--color-brand-700, #0C66E4); /** color used to indicate content that is pinned and prioritized in listings */
+
+  /* Typography */
+  --text-hero-font-family: var(--font-family-sans, Roboto);
+  --text-hero-font-weight: var(--font-weight-bold, 700);
+  --text-hero-font-size: var(--font-size-700, 2rem);
+  --text-hero-line-height: var(--line-height-ratio-tight, 1.25);
+  --text-heading-small-font-family: var(--font-family-sans, Roboto);
+  --text-heading-small-font-weight: var(--font-weight-medium, 500);
+  --text-heading-small-font-size: var(--font-size-400, 1.25rem);
+  --text-heading-small-line-height: var(--line-height-ratio-tight, 1.25);
+  --text-heading-medium-font-family: var(--font-family-sans, Roboto);
+  --text-heading-medium-font-weight: var(--font-weight-medium, 500);
+  --text-heading-medium-font-size: var(--font-size-500, 1.5rem);
+  --text-heading-medium-line-height: var(--line-height-ratio-tight, 1.25);
+  --text-heading-large-font-family: var(--font-family-sans, Roboto);
+  --text-heading-large-font-weight: var(--font-weight-bold, 700);
+  --text-heading-large-font-size: var(--font-size-600, 1.75rem);
+  --text-heading-large-line-height: var(--line-height-ratio-tight, 1.25);
+  --text-heading-xlarge-font-family: var(--font-family-sans, Roboto);
+  --text-heading-xlarge-font-weight: var(--font-weight-bold, 700);
+  --text-heading-xlarge-font-size: var(--font-size-700, 2rem);
+  --text-heading-xlarge-line-height: var(--line-height-ratio-tight, 1.25);
+  --text-body-small-font-family: var(--font-family-sans, Roboto);
+  --text-body-small-font-weight: var(--font-weight-regular, 400);
+  --text-body-small-font-size: var(--font-size-200, 0.875rem);
+  --text-body-small-line-height: var(--line-height-ratio-relaxed, 1.5);
+  --text-body-medium-font-family: var(--font-family-sans, Roboto);
+  --text-body-medium-font-weight: var(--font-weight-regular, 400);
+  --text-body-medium-font-size: var(--font-size-300, 1rem);
+  --text-body-medium-line-height: var(--line-height-ratio-relaxed, 1.5);
+  --text-body-large-font-family: var(--font-family-sans, Roboto);
+  --text-body-large-font-weight: var(--font-weight-regular, 400);
+  --text-body-large-font-size: var(--font-size-400, 1.25rem);
+  --text-body-large-line-height: var(--line-height-ratio-relaxed, 1.5);
+  --text-navigation-font-family: var(--font-family-sans, Roboto);
+  --text-navigation-font-weight: var(--font-weight-regular, 400);
+  --text-navigation-font-size: var(--font-size-200, 0.875rem);
+  --text-navigation-line-height: var(--line-height-grid-200, 1.25rem);
+  --text-menu-font-family: var(--font-family-sans, Roboto);
+  --text-menu-font-weight: var(--font-weight-regular, 400);
+  --text-menu-font-size: var(--font-size-200, 0.875rem);
+  --text-menu-line-height: var(--line-height-grid-200, 1.25rem);
+  --text-button-font-family: var(--font-family-sans, Roboto);
+  --text-button-font-weight: var(--font-weight-medium, 500);
+  --text-button-font-size: var(--font-size-200, 0.875rem);
+  --text-button-line-height: var(--line-height-grid-200, 1.25rem);
+  --text-label-small-font-family: var(--font-family-sans, Roboto);
+  --text-label-small-font-weight: var(--font-weight-medium, 500);
+  --text-label-small-font-size: var(--font-size-200, 0.875rem);
+  --text-label-small-line-height: var(--line-height-grid-200, 1.25rem);
+  --text-label-medium-font-family: var(--font-family-sans, Roboto);
+  --text-label-medium-font-weight: var(--font-weight-medium, 500);
+  --text-label-medium-font-size: var(--font-size-300, 1rem);
+  --text-label-medium-line-height: var(--line-height-grid-300, 1.5rem);
+  --text-caption-font-family: var(--font-family-sans, Roboto);
+  --text-caption-font-weight: var(--font-weight-regular, 400);
+  --text-caption-font-size: var(--font-size-100, 0.75rem);
+  --text-caption-line-height: var(--line-height-grid-100, 1rem);
+  --text-code-font-family: var(--font-family-mono, Roboto Mono);
+  --text-code-font-weight: var(--font-weight-regular, 400);
+  --text-code-font-size: var(--font-size-300, 1rem);
+  --text-code-line-height: var(--line-height-ratio-relaxed, 1.5);
+
+  /* Spacing */
+  --space-layout-gutter: var(--space-125, 12px); /** space used as the default gap between columns or layout elements */
+
+  /* Elevation */
+  --elevation-1: var(--shadow-100, 0px 2px 4px -2px rgba(0, 0, 0, 0.1), 0px 4px 6px -1px rgba(0, 0, 0, 0.1)); /** low elevation used for raised surfaces above the base layout */
+  --elevation-2: var(--shadow-200, 0px 4px 6px -4px rgba(0, 0, 0, 0.1), 0px 10px 15px -3px rgba(0, 0, 0, 0.1)); /** medium elevation used for floating surfaces above regular content */
+  --elevation-3: var(--shadow-300, 0px 8px 10px -6px rgba(0, 0, 0, 0.1), 0px 20px 25px -5px rgba(0, 0, 0, 0.1)); /** high elevation used for top-level surfaces above other floating elements */
+
+  /* ───────────────────────────────────────────────────────────────────────── */
+  /**
+   * COMPONENT TOKENS
+   * Component-scoped overrides — consume only inside the named component.
+   * Fall back to semantic tokens; override here for component-specific behaviour.
+   */
+  /* ───────────────────────────────────────────────────────────────────────── */
+
+  /* Button */
+  --button-text-transform: none; /** Text transform applied to button labels (e.g., none/uppercase). */
+  --button-primary-border-default: rgba(0, 0, 0, 0); /** Primary button border color in default state (no visible border). */
+  --button-primary-border-hover: rgba(0, 0, 0, 0); /** Primary button border color on hover (no visible border). */
+  --button-primary-border-pressed: rgba(0, 0, 0, 0); /** Primary button border color on press (no visible border). */
+  --button-primary-shadow: none; /** Primary button shadow (none). */
+  --button-secondary-shadow: none; /** Secondary button shadow (none). */
+  --button-destructive-border-default: rgba(0, 0, 0, 0); /** Destructive button border color in default state (no visible border). */
+  --button-destructive-border-hover: rgba(0, 0, 0, 0); /** Destructive button border color on hover (no visible border). */
+  --button-destructive-border-pressed: rgba(0, 0, 0, 0); /** Destructive button border color on press (no visible border). */
+  --button-destructive-shadow: none; /** Destructive button shadow (none). */
+  --button-vote-shadow-default: none; /** Vote button shadow in default state (none). */
+  --button-vote-shadow-hover: none; /** Vote button shadow on hover (none). */
+  --button-vote-shadow-pressed: none; /** Vote button shadow on press (none). */
+  --button-vote-selected-border-default: rgba(0, 0, 0, 0); /** Vote button border when selected (default) (no visible border). */
+  --button-vote-selected-border-hover: rgba(0, 0, 0, 0); /** Vote button border when selected (hovered) (no visible border). */
+  --button-vote-selected-border-pressed: rgba(0, 0, 0, 0); /** Vote button border when selected (pressed) (no visible border). */
+  --button-vote-selected-shadow-default: none; /** Vote button shadow when selected (default) (none). */
+  --button-vote-selected-shadow-hover: none; /** Vote button shadow when selected (hovered) (none). */
+  --button-vote-selected-shadow-pressed: none; /** Vote button shadow when selected (pressed) (none). */
+  --button-radius: var(--radius-100, 8px); /** Border radius used for all button variants. */
+  --button-border-width: var(--border-width-100, 1px); /** Border width used for all button variants. */
+  --button-font-weight: var(--text-button-font-weight, 500); /** Font weight used for button labels across all variants. */
+  --button-destructive-background-default: var(--color-action-destructive-default, #c92c2f); /** Destructive button background in default state. */
+  --button-destructive-background-hover: color-mix(in oklch, var(--button-destructive-background-default) 85%, black); /** Destructive button background on hover. */
+  --button-destructive-background-pressed: color-mix(in oklch, var(--button-destructive-background-default) 70%, black); /** Destructive button background on press. */
+  --button-primary-background-default: var(--color-action-primary-default, #0C66E4); /** Primary button background in default state. */
+  --button-primary-background-hover: color-mix(in oklch, var(--button-primary-background-default) 85%, black); /** Primary button background on hover. */
+  --button-primary-background-pressed: color-mix(in oklch, var(--button-primary-background-default) 70%, black); /** Primary button background on press. */
+  --button-primary-content-default: var(--color-content-inverse, #FFFFFF); /** Primary button label/icon color in default state. */
+  --button-primary-content-hover: var(--color-content-inverse, #FFFFFF); /** Primary button label/icon color on hover. */
+  --button-primary-content-pressed: var(--color-content-inverse, #FFFFFF); /** Primary button label/icon color on press. */
+  --button-secondary-background-default: var(--color-action-neutral-default, #FFFFFF); /** Secondary button background in default state. */
+  --button-secondary-background-hover: color-mix(in oklch, var(--button-secondary-background-default) 85%, black); /** Secondary button background on hover. */
+  --button-secondary-background-pressed: color-mix(in oklch, var(--button-secondary-background-default) 70%, black); /** Secondary button background on press. */
+  --button-secondary-content-default: var(--color-content-default, #2B3346); /** Secondary button label/icon color in default state. */
+  --button-secondary-content-hover: var(--color-content-default, #2B3346); /** Secondary button label/icon color on hover. */
+  --button-secondary-content-pressed: var(--color-content-default, #2B3346); /** Secondary button label/icon color on press. */
+  --button-secondary-border-default: var(--color-line-default, #DEDFE2); /** Secondary button border color in default state. */
+  --button-secondary-border-hover: var(--color-line-default, #DEDFE2); /** Secondary button border color on hover. */
+  --button-secondary-border-pressed: var(--color-line-default, #DEDFE2); /** Secondary button border color on press. */
+  --button-destructive-content-default: var(--color-content-inverse, #FFFFFF); /** Destructive button label/icon color in default state. */
+  --button-destructive-content-hover: var(--color-content-inverse, #FFFFFF); /** Destructive button label/icon color on hover. */
+  --button-destructive-content-pressed: var(--color-content-inverse, #FFFFFF); /** Destructive button label/icon color on press. */
+  --button-vote-background-default: var(--color-action-neutral-default, #FFFFFF); /** Vote button background in default state. */
+  --button-vote-background-hover: color-mix(in oklch, var(--button-vote-background-default) 85%, black); /** Vote button background on hover. */
+  --button-vote-background-pressed: color-mix(in oklch, var(--button-vote-background-default) 70%, black); /** Vote button background on press. */
+  --button-vote-content-default: var(--color-content-default, #2B3346); /** Vote button content color in default state. */
+  --button-vote-content-hover: var(--color-content-default, #2B3346); /** Vote button content color on hover. */
+  --button-vote-content-pressed: var(--color-content-default, #2B3346); /** Vote button content color on press. */
+  --button-vote-border-default: var(--color-line-default, #DEDFE2); /** Vote button border color in default state. */
+  --button-vote-border-hover: var(--color-line-default, #DEDFE2); /** Vote button border color on hover. */
+  --button-vote-border-pressed: var(--color-line-default, #DEDFE2); /** Vote button border color on press. */
+  --button-vote-selected-background-default: var(--color-action-primary-default, #0C66E4); /** Vote button background when selected (default). */
+  --button-vote-selected-background-hover: color-mix(in oklch, var(--button-vote-selected-background-default) 85%, black); /** Vote button background when selected (hovered). */
+  --button-vote-selected-background-pressed: color-mix(in oklch, var(--button-vote-selected-background-default) 70%, black); /** Vote button background when selected (pressed). */
+  --button-vote-selected-content-default: var(--color-content-inverse, #FFFFFF); /** Vote button content color when selected (default). */
+  --button-vote-selected-content-hover: var(--color-content-inverse, #FFFFFF); /** Vote button content color when selected (hovered). */
+  --button-vote-selected-content-pressed: var(--color-content-inverse, #FFFFFF); /** Vote button content color when selected (pressed). */
+
+  /* Card */
+  --card-shadow-default: none; /** Card shadow in default state (none). */
+  --card-radius: var(--radius-100, 8px); /** Border radius used for cards. */
+  --card-border-width: var(--border-width-100, 1px); /** Border width used for cards. */
+  --card-shadow-hover: var(--elevation-1, 0px 2px 4px -2px rgba(0, 0, 0, 0.1), 0px 4px 6px -1px rgba(0, 0, 0, 0.1)); /** Card shadow on hover. */
+  --card-shadow-pressed: var(--elevation-1, 0px 2px 4px -2px rgba(0, 0, 0, 0.1), 0px 4px 6px -1px rgba(0, 0, 0, 0.1)); /** Card shadow on press. */
+  --card-border-default: var(--color-line-default, #DEDFE2); /** Card border color in default state. */
+  --card-border-hover: var(--color-line-default, #DEDFE2); /** Card border color on hover. */
+  --card-border-pressed: var(--color-line-default, #DEDFE2); /** Card border color on press. */
+  --card-background-default: var(--color-surface-default, #FFFFFF); /** Card background in default state. */
+  --card-background-hover: color-mix(in oklch, var(--card-background-default) 85%, black); /** Card background on hover. */
+  --card-background-pressed: color-mix(in oklch, var(--card-background-default) 70%, black); /** Card background on press. */
+  --card-title-default: var(--color-content-heading-default, #2B3346); /** Card title color in default state. */
+  --card-title-hover: var(--color-link-default, #0C66E4); /** Card title color on hover (link styling). */
+  --card-title-pressed: var(--color-content-heading-default, #2B3346); /** Card title color on press. */
+  --card-content-default: var(--color-content-default, #2B3346); /** Card body/content color in default state. */
+  --card-content-hover: var(--color-content-default, #2B3346); /** Card body/content color on hover. */
+  --card-content-pressed: var(--color-link-hover, #0055CC); /** Card body/content color on press (link hovered styling). */
+
+  /* Feed */
+  --feed-container-shadow: none; /** Feed container shadow (none). */
+  --feed-item-shadow-default: none; /** Feed item shadow in default state (none). */
+  --feed-container-radius: var(--radius-100, 8px); /** Border radius used for the feed container. */
+  --feed-container-border-width: var(--border-width-100, 1px); /** Border width used for the feed container. */
+  --feed-item-radius: var(--radius-100, 8px); /** Border radius used for feed items. */
+  --feed-item-border-width: var(--border-width-100, 1px); /** Border width used for feed items. */
+  --feed-item-shadow-hover: var(--elevation-1, 0px 2px 4px -2px rgba(0, 0, 0, 0.1), 0px 4px 6px -1px rgba(0, 0, 0, 0.1)); /** Feed item shadow on hover. */
+  --feed-item-shadow-pressed: var(--elevation-1, 0px 2px 4px -2px rgba(0, 0, 0, 0.1), 0px 4px 6px -1px rgba(0, 0, 0, 0.1)); /** Feed item shadow on press. */
+  --feed-container-border-color: var(--color-line-default, #DEDFE2); /** Feed container border color. */
+  --feed-container-background: var(--color-surface-default, #FFFFFF); /** Feed container background. */
+  --feed-item-border-default: var(--color-line-default, #DEDFE2); /** Feed item border color in default state. */
+  --feed-item-border-hover: var(--color-line-default, #DEDFE2); /** Feed item border color on hover. */
+  --feed-item-border-pressed: var(--color-line-default, #DEDFE2); /** Feed item border color on press. */
+  --feed-item-background-default: var(--color-surface-default, #FFFFFF); /** Feed item background in default state. */
+  --feed-item-background-hover: color-mix(in oklch, var(--feed-item-background-default) 85%, black); /** Feed item background on hover. */
+  --feed-item-background-pressed: color-mix(in oklch, var(--feed-item-background-default) 70%, black); /** Feed item background on press. */
+  --feed-item-title-default: var(--color-content-heading-default, #2B3346); /** Feed item title color in default state. */
+  --feed-item-title-hover: var(--color-link-default, #0C66E4); /** Feed item title color on hover (link styling). */
+  --feed-item-title-pressed: var(--color-link-hover, #0055CC); /** Feed item title color on press (link hovered styling). */
+  --feed-item-content-default: var(--color-content-default, #2B3346); /** Feed item content color in default state. */
+  --feed-item-content-hover: var(--color-content-default, #2B3346); /** Feed item content color on hover. */
+  --feed-item-content-pressed: var(--color-link-hover, #0055CC); /** Feed item content color on press (link hovered styling). */
+
+  /* Navigation */
+  --navigation-border-top: rgba(0, 0, 0, 0); /** Top border of navigation (transparent). */
+  --navigation-background: var(--color-surface-default, #FFFFFF); /** Navigation bar background. */
+  --navigation-content: var(--color-content-default, #2B3346); /** Navigation bar content color (text/icons). */
+  --navigation-dropdown-background: var(--color-surface-overlay, #FFFFFF); /** Navigation dropdown background. */
+  --navigation-dropdown-content: var(--color-content-default, #2B3346); /** Navigation dropdown content color. */
+  --navigation-border-bottom: var(--color-line-default, #DEDFE2); /** Bottom border of navigation. */
+
+  /* Widget */
+  --widget-shadow: none; /** Default widget shadow (none). */
+  --widget-hero-content-shadow: none; /** Hero widget content shadow (none; handled by image/overlay as needed). */
+  --widget-hero-background: uploaded image; /** Background of the hero section. */
+  --widget-hero-height: 240px; /** Height of the hero section. */
+  --widget-featured-background: var(--color-status-information-bold, #0c66e4); /** Featured topic widget background. */
+  --widget-introduction-icon-background: var(--color-status-success-bold, #1f8444); /** Introduction widget icon container background. */
+  --widget-title: var(--color-content-heading-default, #2B3346); /** Default widget title color. */
+  --widget-subtitle: var(--color-content-default, #2B3346); /** Default widget subtitle color. */
+  --widget-background: var(--color-surface-page, #FAFAFA); /** Default widget background. */
+  --widget-hero-title: var(--color-content-heading-hero, #FFFFFF); /** Hero widget title color. */
+  --widget-hero-subtitle: var(--color-content-heading-hero, #FFFFFF); /** Hero widget subtitle color. */
+  --widget-featured-content: var(--color-content-inverse, #FFFFFF); /** Featured topic widget content color. */
+  --widget-introduction-background: var(--color-surface-default, #FFFFFF); /** Introduction widget background. */
+  --widget-introduction-content: var(--color-content-default, #2B3346); /** Introduction widget body/content color. */
+  --widget-introduction-icon-content: var(--color-content-inverse, #FFFFFF); /** Introduction widget icon color. */
+  --widget-introduction-close-content: var(--color-content-subtlest, #696E7C); /** Introduction widget close button color. */
+
+  /* Back to Top */
+  --backtotop-background: var(--color-surface-inverse, #2B3346); /** Back-to-top button background. */
+  --backtotop-content: var(--color-content-inverse, #FFFFFF); /** Back-to-top button icon/content color. */
+}