﻿/* ============================================
   COBALT DESIGN SYSTEM v12.3.2
   Official Theme Tokens (Comprehensive Update)
   Light Theme (Light Values) | Dark Theme (Dark Values)
   ============================================ */

:root {
    /* ========== BORDER TOKENS ========== */
    --c-thm-border: 1px solid #8C96A1;
    --c-thm-border-error: 1px solid #B51F0F;
    --c-thm-border-error-muted: 1px solid #F7CBC6;
    --c-thm-border-info: 1px solid #1771E4;
    --c-thm-border-info-muted: 1px solid #BBD7FB;
    --c-thm-border-muted: 1px solid #D4DBE3;
    --c-thm-border-outline-focus: none;
    --c-thm-border-primary: 1px solid #1D6460;
    --c-thm-border-radius: 0.25rem;
    --c-thm-border-success: 1px solid #058326;
    --c-thm-border-success-muted: 1px solid #B2DFBE;
    --c-thm-border-transparent: 1px solid transparent;
    --c-thm-border-warning: 1px solid #B65B08;
    --c-thm-border-warning-muted: 1px solid #FCD574;
    --c-thm-border-width: 1px;
    /* ========== BUTTON TOKENS ========== */
    --c-thm-button-border-radius: 0.25rem;
    --c-thm-button-font-weight: 700;
    --c-thm-button-width: auto;
    --c-thm-button-height-s: 28px;
    --c-thm-button-height-m: 2rem;
    --c-thm-button-height-l: 36px;
    --c-thm-button-transition: background-color 0.2s, box-shadow 0.2s;
    /* PRIMARY BUTTON */
    --c-thm-button-primary-bg: #1D6460;
    --c-thm-button-primary-bg-hover: #0F4D4C;
    --c-thm-button-primary-bg-focus: #0F4D4C;
    --c-thm-button-primary-bg-pressed: #053334;
    --c-thm-button-primary-bg-disabled: #D4DBE3;
    --c-thm-button-primary-border: 1px solid #1D6460;
    --c-thm-button-primary-border-disabled: 1px solid #D4DBE3;
    --c-thm-button-primary-border-focus: 1px solid #0F4D4C;
    --c-thm-button-primary-border-hover: 1px solid #0F4D4C;
    --c-thm-button-primary-border-pressed: 1px solid #053334;
    --c-thm-button-primary-fg: #FFFFFF;
    --c-thm-button-primary-fg-disabled: #8C96A1;
    --c-thm-button-primary-fg-focus: #FFFFFF;
    --c-thm-button-primary-fg-hover: #FFFFFF;
    --c-thm-button-primary-fg-pressed: #FFFFFF;
    --c-thm-button-primary-shadow-focus: none;
    /* SECONDARY BUTTON */
    --c-thm-button-secondary-bg: #F6F8FA;
    --c-thm-button-secondary-bg-disabled: #F6F8FA;
    --c-thm-button-secondary-bg-focus: #E9EDF2;
    --c-thm-button-secondary-bg-hover: #E9EDF2;
    --c-thm-button-secondary-bg-pressed: #D4DBE3;
    --c-thm-button-secondary-border: 1px solid #8C96A1;
    --c-thm-button-secondary-border-disabled: 1px solid #E9EDF2;
    --c-thm-button-secondary-border-focus: 1px solid #727B85;
    --c-thm-button-secondary-border-hover: 1px solid #727B85;
    --c-thm-button-secondary-border-pressed: 1px solid #575F6A;
    --c-thm-button-secondary-fg: #303640;
    --c-thm-button-secondary-fg-disabled: #8C96A1;
    --c-thm-button-secondary-fg-focus: #060708;
    --c-thm-button-secondary-fg-hover: #060708;
    --c-thm-button-secondary-fg-pressed: #060708;
    --c-thm-button-secondary-shadow-focus: none;
    /* TERTIARY BUTTON */
    --c-thm-button-tertiary-bg: transparent;
    --c-thm-button-tertiary-bg-disabled: 1px solid transparent;
    --c-thm-button-tertiary-bg-focus: #E9EDF2;
    --c-thm-button-tertiary-bg-hover: #E9EDF2;
    --c-thm-button-tertiary-bg-pressed: #D4DBE3;
    --c-thm-button-tertiary-border: 1px solid transparent;
    --c-thm-button-tertiary-border-disabled: 1px solid transparent;
    --c-thm-button-tertiary-border-focus: 1px solid transparent;
    --c-thm-button-tertiary-border-hover: 1px solid transparent;
    --c-thm-button-tertiary-border-pressed: 1px solid transparent;
    --c-thm-button-tertiary-fg: #303640;
    --c-thm-button-tertiary-fg-disabled: #B9C1CB;
    --c-thm-button-tertiary-fg-focus: #060708;
    --c-thm-button-tertiary-fg-hover: #060708;
    --c-thm-button-tertiary-fg-pressed: #060708;
    --c-thm-button-tertiary-shadow-focus: none;
    /* DANGER BUTTON */
    --c-thm-button-danger-bg: #B51F0F;
    --c-thm-button-danger-bg-disabled: #D4DBE3;
    --c-thm-button-danger-bg-focus: #8D1307;
    --c-thm-button-danger-bg-hover: #8D1307;
    --c-thm-button-danger-bg-pressed: #5A0D05;
    --c-thm-button-danger-border: 1px solid #B51F0F;
    --c-thm-button-danger-border-disabled: 1px solid #D4DBE3;
    --c-thm-button-danger-border-focus: 1px solid #8D1307;
    --c-thm-button-danger-border-hover: 1px solid #8D1307;
    --c-thm-button-danger-border-pressed: 1px solid #5A0D05;
    --c-thm-button-danger-fg: #FFFFFF;
    --c-thm-button-danger-fg-disabled: #8C96A1;
    --c-thm-button-danger-fg-focus: #FFFFFF;
    --c-thm-button-danger-fg-hover: #FFFFFF;
    --c-thm-button-danger-fg-pressed: #FFFFFF;
    --c-thm-button-danger-shadow-focus: 0 0 0 3px #FCE8E6;
    /* INTERACTIVE DEVICE BUTTON */
    --c-thm-button-interactive-device-bg: #0A5BC3;
    --c-thm-button-interactive-device-bg-disabled: #D4DBE3;
    --c-thm-button-interactive-device-bg-focus: #08499D;
    --c-thm-button-interactive-device-bg-hover: #08499D;
    --c-thm-button-interactive-device-bg-pressed: #08499D;
    --c-thm-button-interactive-device-border: 1px solid transparent;
    --c-thm-button-interactive-device-border-disabled: 1px solid #D4DBE3;
    --c-thm-button-interactive-device-border-focus: 1px solid transparent;
    --c-thm-button-interactive-device-border-hover: 1px solid transparent;
    --c-thm-button-interactive-device-border-pressed: 1px solid transparent;
    --c-thm-button-interactive-device-fg: #FFFFFF;
    --c-thm-button-interactive-device-fg-disabled: #8C96A1;
    --c-thm-button-interactive-device-fg-focus: #FFFFFF;
    --c-thm-button-interactive-device-fg-hover: #FFFFFF;
    --c-thm-button-interactive-device-fg-pressed: #FFFFFF;
    --c-thm-button-interactive-device-shadow-focus: 0 0 0 3px #FCE8E6;
    /* ========== COLOR TOKENS - PRIMARY ========== */
    --c-thm-color-primary: #1D6460;
    --c-thm-color-primary-strong: #0F4D4C;
    --c-thm-color-primary-stronger: #053334;
    --c-thm-color-primary-muted: #DBEFEE;
    --c-thm-color-primary-shadow: #DBEFEE;
    --c-thm-color-primary-shadow-drop: 0 0 0 3px #DBEFEE;
    --c-thm-color-primary-shadow-inset: inset 0 0 0 3px #DBEFEE;
    --c-thm-color-accent: #489690;
    /* ========== COLOR TOKENS - BACKGROUND ========== */
    --c-thm-color-bg-00: #FFFFFF;
    --c-thm-color-bg-10: #FDFDFD;
    --c-thm-color-bg-20: #F6F8FA;
    --c-thm-color-bg-30: #E9EDF2;
    --c-thm-color-bg-inverse-00: #053334;
    --c-thm-color-bg-mask: #303640;
    /* ========== COLOR TOKENS - BORDER ========== */
    --c-thm-color-border: #8C96A1;
    --c-thm-color-border-muted: #D4DBE3;
    --c-thm-color-border-container: #D4DBE3;
    /* ========== COLOR TOKENS - TEXT ========== */
    --c-thm-color-text: #303640;
    --c-thm-color-text-muted: #575F6A;
    --c-thm-color-text-strong: #060708;
    --c-thm-color-text-inverse: #FDFDFD;
    --c-thm-color-text-inverse-muted: #D4DBE3;
    --c-thm-color-text-inverse-strong: #FFFFFF;
    /* ========== COLOR TOKENS - HYPERLINK ========== */
    --c-thm-color-link: #0A5BC3;
    --c-thm-color-link-hover: #08499D;
    --c-thm-color-link-active: #08499D;
    --c-thm-color-link-visited: #063274;
    /* ========== COLOR TOKENS - INFO STATE ========== */
    --c-thm-color-info-strong: #1771E4;
    --c-thm-color-info-muted: #E3EFFE;
    --c-thm-color-info-shadow: 0 0 0 3px #E3EFFE;
    --c-thm-color-info-border-strong: #1771E4;
    --c-thm-color-info-border-strong-focus: #08499D;
    --c-thm-color-info-border-strong-hover: #0A5BC3;
    --c-thm-color-info-border-muted: #BBD7FB;
    --c-thm-color-info-accent-muted: #3489F4;
    /* ========== COLOR TOKENS - SUCCESS STATE ========== */
    --c-thm-color-success-strong: #058326;
    --c-thm-color-success-muted: #E0F2E5;
    --c-thm-color-success-shadow: 0 0 0 3px #E0F2E5;
    --c-thm-color-success-border-strong: #058326;
    --c-thm-color-success-border-strong-focus: #03591A;
    --c-thm-color-success-border-strong-hover: #046F20;
    --c-thm-color-success-border-muted: #B2DFBE;
    --c-thm-color-success-accent-muted: #1AA03D;
    /* ========== COLOR TOKENS - WARNING STATE ========== */
    --c-thm-color-warning-strong: #B65B08;
    --c-thm-color-warning-muted: #FEEDBF;
    --c-thm-color-warning-shadow: 0 0 0 3px #FEEDBF;
    --c-thm-color-warning-border-strong: #B65B08;
    --c-thm-color-warning-border-strong-focus: #783C04;
    --c-thm-color-warning-border-strong-hover: #964B05;
    --c-thm-color-warning-border-muted: #FCD574;
    --c-thm-color-warning-accent-muted: #DC7311;
    /* ========== COLOR TOKENS - ERROR STATE ========== */
    --c-thm-color-error-strong: #B51F0F;
    --c-thm-color-error-muted: #FCE8E6;
    --c-thm-color-error-shadow: 0 0 0 3px #FCE8E6;
    --c-thm-color-error-border-strong: #B51F0F;
    --c-thm-color-error-border-strong-focus: #8D1307;
    --c-thm-color-error-border-strong-hover: #B51F0F;
    --c-thm-color-error-border-muted: #F7CBC6;
    --c-thm-color-error-accent-muted: #E85A4B;
    /* ========== COLOR TOKENS - DISABLED ========== */
    --c-thm-color-disabled-bg: #D4DBE3;
    --c-thm-color-disabled-border: #D4DBE3;
    --c-thm-color-disabled-text: #8C96A1;
    --c-thm-color-disabled-text-muted: #B9C1CB;
    /* ========== COLOR TOKENS - READONLY ========== */
    --c-thm-color-readonly-bg: #E9EDF2;
    --c-thm-color-readonly-border: #8C96A1;
    --c-thm-color-readonly-text: #303640;
    /* ========== COLOR TOKENS - OPTION ========== */
    --c-thm-color-option-bg-hover: #E9EDF2;
    --c-thm-color-option-selected-bg: #DBEFEE;
    --c-thm-color-option-selected-bg-hover: #DBEFEE;
    --c-thm-color-option-selected-fg: #060708;
    /* ========== COLOR TOKENS - FOCUS ========== */
    --c-thm-color-focus-outline: #489690;
    --c-thm-color-focus-highlight: #DBEFEE;
    --c-thm-color-highlight-bg: #DBEFEE;
    --c-thm-color-highlight-text: #060708;
    /* ========== COLOR TOKENS - SHADOW ========== */
    --c-thm-color-shadow: color-mix(in srgb, #1E2229, transparent 85%);
    /* ========== COLOR TOKENS - CHART ========== */
    --c-thm-color-chart-base-legend: #303640;
    --c-thm-color-chart-base-lines: #E9EDF2;
    --c-thm-color-chart-base-tick: #575F6A;
    --c-thm-color-chart-categorical-01: #489690;
    --c-thm-color-chart-categorical-02: #933965;
    --c-thm-color-chart-categorical-03: #1BA6D4;
    --c-thm-color-chart-categorical-04: #0A5BC3;
    --c-thm-color-chart-categorical-05: #9F7FE2;
    --c-thm-color-chart-categorical-06: #1AA03D;
    --c-thm-color-chart-categorical-07: #DC609D;
    --c-thm-color-chart-categorical-08: #016F9D;
    --c-thm-color-chart-categorical-09: #DC7311;
    --c-thm-color-chart-categorical-10: #1D6460;
    --c-thm-color-chart-categorical-11: #BA800A;
    /* ========== FONT FAMILIES ========== */
    --c-thm-font-family-body-default: 'Solve Pro Screen Variable', 'Arial', -apple-system, BlinkMacSystemFont, sans-serif;
    --c-thm-font-family-body-mono: 'Roboto Mono', 'Courier New', monospace;
    --c-thm-font-family-heading: 'Solve Pro Screen Variable', 'Arial', -apple-system, BlinkMacSystemFont, sans-serif;
    /* ========== FONT WEIGHTS ========== */
    --c-thm-font-weight-default: 400;
    --c-thm-font-weight-regular: 400;
    --c-thm-font-weight-lighter: 300;
    --c-thm-font-weight-bold: 700;
    --c-thm-font-weight-bolder: 800;
    /* ========== FONT SIZES ========== */
    --c-thm-font-size-root: 16px;
    --c-thm-font-size-default: 0.875rem;
    --c-thm-font-size-s: 0.75rem;
    --c-thm-font-size-l: 1rem;
    --c-thm-font-size-xl: 1.5rem;
    --c-thm-font-size-icon: 1.25em;
    /* ========== TYPOGRAPHY SCALE - BODY ========== */
    --c-thm-font-body-xs-size: 0.625rem;
    --c-thm-font-body-xs-size-px: 10px;
    --c-thm-font-body-xs-weight: 400;
    --c-thm-font-body-xs-height: 1.25;
    --c-thm-font-body-s-size: 0.75rem;
    --c-thm-font-body-s-size-px: 12px;
    --c-thm-font-body-s-weight: 400;
    --c-thm-font-body-s-height: 1.25;
    --c-thm-font-body-m-size: 0.875rem;
    --c-thm-font-body-m-size-px: 14px;
    --c-thm-font-body-m-weight: 400;
    --c-thm-font-body-m-height: 1.25;
    --c-thm-font-body-l-size: 1rem;
    --c-thm-font-body-l-size-px: 16px;
    --c-thm-font-body-l-weight: 400;
    --c-thm-font-body-l-height: 1.25;
    /* ========== TYPOGRAPHY SCALE - HEADINGS ========== */
    --c-thm-font-h1-size: 2rem;
    --c-thm-font-h1-size-px: 32px;
    --c-thm-font-h1-weight: 700;
    --c-thm-font-h1-height: 1.125;
    --c-thm-font-h2-size: 1.75rem;
    --c-thm-font-h2-size-px: 28px;
    --c-thm-font-h2-weight: 700;
    --c-thm-font-h2-height: 1.125;
    --c-thm-font-h3-size: 1.5rem;
    --c-thm-font-h3-size-px: 24px;
    --c-thm-font-h3-weight: 700;
    --c-thm-font-h3-height: 1.125;
    --c-thm-font-h4-size: 1.25rem;
    --c-thm-font-h4-size-px: 20px;
    --c-thm-font-h4-weight: 700;
    --c-thm-font-h4-height: 1.125;
    --c-thm-font-h5-size: 1.125rem;
    --c-thm-font-h5-size-px: 18px;
    --c-thm-font-h5-weight: 700;
    --c-thm-font-h5-height: 1.125;
    --c-thm-font-h6-size: 1rem;
    --c-thm-font-h6-size-px: 16px;
    --c-thm-font-h6-weight: 700;
    --c-thm-font-h6-height: 1.125;
    /* ========== DISPLAY SCALE ========== */
    --c-thm-font-display-s-size: 2.5rem;
    --c-thm-font-display-s-size-px: 40px;
    --c-thm-font-display-s-weight: 400;
    --c-thm-font-display-s-height: 1.1;
    --c-thm-font-display-m-size: 3rem;
    --c-thm-font-display-m-size-px: 48px;
    --c-thm-font-display-m-weight: 400;
    --c-thm-font-display-m-height: 1.1;
    --c-thm-font-display-l-size: 3.875rem;
    --c-thm-font-display-l-size-px: 62px;
    --c-thm-font-display-l-weight: 400;
    --c-thm-font-display-l-height: 1.1;
    /* ========== INPUT TOKENS ========== */
    --c-thm-input-border: 1px solid #8C96A1;
    --c-thm-input-border-width: 1px;
    --c-thm-input-color-bg: #FFFFFF;
    --c-thm-input-color-bg-focus: #FFFFFF;
    --c-thm-input-color-bg-hover: #F6F8FA;
    --c-thm-input-color-border: #8C96A1;
    --c-thm-input-color-border-active: #489690;
    --c-thm-input-color-border-focus: #489690;
    --c-thm-input-color-border-hover: #8C96A1;
    --c-thm-input-color-border-selected: #489690;
    --c-thm-input-color-placeholder: #575F6A;
    --c-thm-input-color-text: #303640;
    --c-thm-input-color-selected-bg: #1D6460;
    --c-thm-input-color-selected-bg-focus: #0F4D4C;
    --c-thm-input-color-selected-bg-hover: #0F4D4C;
    --c-thm-input-color-selected-border: #489690;
    --c-thm-input-color-selected-fg: #FDFDFD;
    --c-thm-input-height-xs: 20px;
    --c-thm-input-height-s: 28px;
    --c-thm-input-height-m: 2rem;
    --c-thm-input-height-l: 36px;
    --c-thm-input-list-item-padding: 0.25rem 0.5rem;
    --c-thm-input-padding: 0 0.5rem;
    --c-thm-input-transition: border-color 0.2s;
    --c-thm-input-width-s: 80px;
    --c-thm-input-width-m: 100px;
    --c-thm-input-width-l: 120px;
    /* ========== TRANSITIONS ========== */
    --c-thm-checkbox-transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
    /* ========== FOCUS RING TOKENS ========== */
    --c-thm-focus-ring-attached-outline: 1px solid #489690;
    --c-thm-focus-ring-attached-shadow: none;
    --c-thm-focus-ring-detached-outline: 2px solid #FFFFFF;
    --c-thm-focus-ring-detached-shadow: 0 0 0 4px #489690;
    --c-thm-focus-ring-inset-outline: none;
    --c-thm-focus-ring-inset-shadow: inset 0 0 0 2px #489690;
    /* ========== SHADOW TOKENS ========== */
    --c-thm-shadow-inline: 0 3px 8px color-mix(in srgb, #1E2229, transparent 85%);
    --c-thm-shadow-dialog: 0 6px 12px color-mix(in srgb, #1E2229, transparent 85%);
    --c-thm-shadow-overlay: 0 0 6px 0 color-mix(in srgb, #1E2229, transparent 85%);
    --c-thm-shadow-focus-inset: inset 0 0 0 2px #489690;
    --c-thm-shadow-focus-drop: none;
    /* ========== SPACING TOKENS ========== */
    --c-thm-spacing-static-3xs: 0.125rem;
    --c-thm-spacing-static-2xs: 0.25rem;
    --c-thm-spacing-static-xs: 0.5rem;
    --c-thm-spacing-static-s: 0.75rem;
    --c-thm-spacing-static-m: 1rem;
    --c-thm-spacing-static-l: 1.25rem;
    --c-thm-spacing-static-xl: 1.5rem;
    --c-thm-spacing-static-2xl: 2rem;
    --c-thm-spacing-static-3xl: 3rem;
    --c-thm-spacing-static-4xl: 3.5rem;
    --c-thm-spacing-static-5xl: 4rem;
    /* NEGATIVE SPACING */
    --c-thm-spacing-static-neg-3xs: -0.125rem;
    --c-thm-spacing-static-neg-2xs: -0.25rem;
    --c-thm-spacing-static-neg-xs: -0.5rem;
    --c-thm-spacing-static-neg-s: -0.75rem;
    --c-thm-spacing-static-neg-m: -1rem;
    --c-thm-spacing-static-neg-l: -1.25rem;
    --c-thm-spacing-static-neg-xl: -1.5rem;
    --c-thm-spacing-static-neg-2xl: -2rem;
    --c-thm-spacing-static-neg-3xl: -3rem;
    --c-thm-spacing-static-neg-4xl: -3.5rem;
    --c-thm-spacing-static-neg-5xl: -4rem;
    /* INLINE SPACING */
    --c-thm-spacing-inline-small: 0.25rem;
    --c-thm-spacing-inline-default: 0.5rem;
    --c-thm-spacing-inline-large: 1rem;
    --c-thm-spacing-inline-neg-small: -0.25rem;
    --c-thm-spacing-inline-neg-default: -0.5rem;
    --c-thm-spacing-inline-neg-large: -1rem;
    /* ========== TABLE TOKENS ========== */
    --c-thm-table-header-bg: #F6F8FA;
    --c-thm-table-header-border: 1px solid transparent;
    --c-thm-table-head-bg: #FDFDFD;
    --c-thm-table-head-bg-hover: #DBEFEE;
    --c-thm-table-head-border-color: #FDFDFD;
    --c-thm-table-head-fg: #575F6A;
    --c-thm-table-head-fg-hover: #303640;
    --c-thm-table-head-selected-fg: #303640;
    --c-thm-table-row-bg: #FFFFFF;
    --c-thm-table-row-bg-alt: #F6F8FA;
    --c-thm-table-row-bg-hover: #E9EDF2;
    --c-thm-table-row-border-color: #D4DBE3;
    --c-thm-table-row-selected-bg: #DBEFEE;
    --c-thm-table-footer-bg: #F6F8FA;
    --c-thm-table-footer-border: 1px solid #F6F8FA;
    --c-thm-table-paginator-bg: #F6F8FA;
    /* ========== CONTAINER TOKENS ========== */
    --c-thm-container-border: 1px solid #D4DBE3;
    --c-thm-container-content-bg: #FFFFFF;
    --c-thm-container-content-border-color: #D4DBE3;
    --c-thm-container-content-padding: 0.5rem 1rem;
    --c-thm-container-footer-border-color: #D4DBE3;
    --c-thm-container-header-bg: #F6F8FA;
    --c-thm-container-header-font-weight: 700;
    --c-thm-container-header-icon-color: #8C96A1;
    --c-thm-container-header-icon-color-hover: #303640;
    --c-thm-container-header-icon-transition: color 0.2s;
    --c-thm-container-header-padding: 0.5rem;
    /* ========== SCROLLBAR TOKENS ========== */
    --c-thm-scrollbar-width: 10px;
    --c-thm-scrollbar-track-color-bg: #F6F8FA;
    --c-thm-scrollbar-track-border: 0 none;
    --c-thm-scrollbar-thumb-color-bg: #8C96A1;
    --c-thm-scrollbar-thumb-color-bg-hover: #727B85;
    --c-thm-scrollbar-thumb-border-radius: 20px;
}

/* Generated by Cobalt Design System v12.3.2 */
/* Updated: January 19, 2026 */
/* Total Tokens: 400+ (Comprehensive Design System) */
