/* IBM Carbon Design System - Light Theme (g10) */ :root { --cds-interactive-01: #0f62fe; --cds-interactive-02: #393939; --cds-interactive-03: #0f62fe; --cds-interactive-04: #0f62fe; --cds-ui-background: #f4f4f4; --cds-ui-01: #ffffff; --cds-ui-02: #f4f4f4; --cds-ui-03: #e0e0e0; --cds-ui-04: #8d8d8d; --cds-ui-05: #161616; --cds-text-01: #161616; --cds-text-02: #525252; --cds-text-03: #a8a8a8; --cds-text-04: #ffffff; --cds-text-05: #6f6f6f; --cds-text-error: #da1e28; --cds-icon-01: #161616; --cds-icon-02: #525252; --cds-icon-03: #ffffff; --cds-link-01: #0f62fe; --cds-link-02: #0043ce; --cds-inverse-link: #78a9ff; --cds-field-01: #ffffff; --cds-field-02: #f4f4f4; --cds-inverse-01: #ffffff; --cds-inverse-02: #393939; --cds-support-01: #da1e28; --cds-support-02: #198038; --cds-support-03: #f1c21b; --cds-support-04: #0043ce; --cds-inverse-support-01: #fa4d56; --cds-inverse-support-02: #42be65; --cds-inverse-support-03: #f1c21b; --cds-inverse-support-04: #4589ff; --cds-overlay: rgba(22, 22, 22, .5); --cds-danger: #da1e28; --cds-focus: #0f62fe; --cds-hover-primary: #0353e9; --cds-active-primary: #002d9c; --cds-hover-primary-text: #0043ce; --cds-hover-secondary: #4c4c4c; --cds-active-secondary: #6f6f6f; --cds-hover-tertiary: #0353e9; --cds-active-tertiary: #002d9c; --cds-hover-ui: #e5e5e5; --cds-hover-light-ui: #e5e5e5; --cds-hover-selected-ui: #cacaca; --cds-active-ui: #c6c6c6; --cds-active-light-ui: #cacaca; --cds-selected-ui: #e5e5e5; --cds-selected-light-ui: #e5e5e5; --cds-inverse-hover-ui: #353535; --cds-hover-danger: #ba121b; --cds-active-danger: #750e13; --cds-hover-row: #f4f4f4; --cds-visited-link: #0043ce; --cds-disabled-01: #f4f4f4; --cds-disabled-02: #bdbdbd; --cds-disabled-03: #8d8d8d; --cds-button-primary: #0f62fe; --cds-button-secondary: #393939; --cds-button-tertiary: #0f62fe; --cds-button-danger-primary: #da1e28; --cds-button-danger-secondary: #da1e28; --cds-background: #f4f4f4; --cds-background-inverse: #161616; --cds-background-brand: #0f62fe; --cds-background-active: #e5e5e5; --cds-background-hover: #e8e8e8; --cds-background-selected: #e5e5e5; --cds-background-selected-hover: #cacaca; --cds-layer: #ffffff; --cds-layer-accent: #f4f4f4; --cds-layer-accent-hover: #e8e8e8; --cds-layer-accent-active: #e0e0e0; --cds-layer-hover: #e8e8e8; --cds-layer-active: #e5e5e5; --cds-layer-selected: #e5e5e5; --cds-layer-selected-hover: #cacaca; --cds-layer-selected-inverse: #393939; --cds-field: #ffffff; --cds-field-hover: #e8e8e8; --cds-border-subtle: #e0e0e0; --cds-border-strong: #8d8d8d; --cds-border-inverse: #393939; --cds-border-interactive: #0f62fe; --cds-border-subtle-selected: #c6c6c6; --cds-text-primary: #161616; --cds-text-secondary: #525252; --cds-text-placeholder: #a8a8a8; --cds-text-helper: #6f6f6f; --cds-text-on-color: #ffffff; --cds-text-inverse: #f4f4f4; --cds-text-disabled: #bdbdbd; --cds-link-primary: #0f62fe; --cds-link-secondary: #0043ce; --cds-link-visited: #0043ce; --cds-link-inverse: #78a9ff; --cds-link-primary-hover: #0353e9; --cds-icon-primary: #161616; --cds-icon-secondary: #525252; --cds-icon-on-color: #ffffff; --cds-icon-inverse: #f4f4f4; --cds-icon-disabled: #bdbdbd; --cds-support-error: #da1e28; --cds-support-success: #198038; --cds-support-warning: #f1c21b; --cds-support-info: #0043ce; --cds-support-error-inverse: #fa4d56; --cds-support-success-inverse: #42be65; --cds-support-warning-inverse: #f1c21b; --cds-support-info-inverse: #4589ff; --cds-interactive: #0f62fe; --cds-shadow: rgba(0, 0, 0, .16); } /* Typography */ body { font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; color: var(--cds-text-primary); background: var(--cds-background); font-size: 1rem; font-weight: 400; line-height: 1.5; } h1, h2, h3, h4, h5, h6 { font-weight: 600; line-height: 1.28572; } h1 { font-size: 2rem; } h2 { font-size: 1.75rem; } h3 { font-size: 1.25rem; } h4 { font-size: 1rem; } h5 { font-size: .875rem; } h6 { font-size: .75rem; } a { color: var(--cds-link-primary); text-decoration: none; } a:hover { color: var(--cds-link-primary-hover); text-decoration: underline; } button { font-family: inherit; cursor: pointer; } input, textarea, select { font-family: inherit; color: var(--cds-text-primary); }