/**
 * Six Sigma Tools — design tokens
 * Change appearance globally by editing variables here.
 */
:root {
    /* Typography */
    --font-family-ui: Arial, Verdana, sans-serif;
    --font-family-mono: 'Courier New', Courier, monospace;
    --font-size-base: 1rem;
    --font-size-small: 0.85rem;
    --font-size-dialog: var(--font-size-small);
    --font-size-body: 11pt;
    --line-height-content: 1.6;
    --line-height-ui: 1.5;

    /* Brand / accent */
    --color-primary: #0078d7;
    --color-primary-hover: #106ebe;
    --color-primary-dark: #0066b8;
    --color-accent: #3498db;
    --color-accent-light: #5dade2;
    --color-icon-filter: invert(41%) sepia(98%) saturate(1000%) hue-rotate(194deg) brightness(95%) contrast(97%);

    /* Title bar (app header + modal headers) */
    --title-bar-bg: var(--color-primary);
    --title-bar-color: #ffffff;
    --title-bar-padding: 2px 8px;
    --title-bar-font-weight: 600;
    --title-bar-font-size: var(--font-size-base);

    /* Text */
    --color-text: #212121;
    --color-text-body: #333;
    --color-text-secondary: #444;
    --color-text-muted: #666;
    --color-text-subtle: #888;
    --color-text-faint: #999;
    --color-text-disabled: #555;
    --color-text-shortcut: #505050;
    --color-menu-disabled: #a0a0a0;
    --color-text-placeholder: #808080;
    --color-icon-muted: #6c757d;
    --color-heading: #1a5276;
    --color-heading-secondary: #2c3e50;
    --color-heading-tertiary: #34495e;
    --color-link: #2980b9;

    /* Surfaces */
    --bg-app: #f0f0f0;
    --bg-app-dark: #e0e0e0;
    --bg-surface: #ffffff;
    --bg-inset: #f3f3f3;
    --bg-highlight: #cce5ff;
    --bg-toolbar-hover: #e0e8f0;
    --bg-toolbar-active: #c8d8e8;
    --bg-tree-hover: #e6f3ff;
    --bg-code: #f4f4f4;
    --bg-pre: #f6f8fa;
    --bg-math: #f8fafc;
    --bg-section: #eef6fc;
    --bg-section-alt: #f4f9fd;
    --bg-blockquote: #f0f7ff;
    --bg-menu-hover: #e0e8f0;
    --bg-row-selected: #dcdcdc;
    --bg-zebra: #fafafa;

    /* Borders */
    --border-default: #c0c0c0;
    --border-dark: #909090;
    --border-light: #ddd;
    --border-input: #ccc;
    --border-subtle: #e0e0e0;
    --border-math: #e2e8f0;
    --border-toolbar: #c0d5ea;
    --border-toolbar-active: #a0b5c8;
    --border-section: #d0dce6;

    /* Semantic — verdict / status */
    --color-success-bg: #f0fff4;
    --color-success-border: #80c880;
    --color-success-text: #1a7a1a;
    --color-success-accent: #27ae60;
    --color-success-accent-border: #2ecc71;
    --color-error-bg: #fff0f0;
    --color-error-border: #e08080;
    --color-error-text: #a00;
    --color-error-accent: #c0392b;
    --color-saved: #0c8;
    --color-changed: #c33;

    /* Spacing scale */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 12px;
    --space-lg: 16px;
    --space-xl: 20px;

    /* Form controls — compact, aligned with toolbar / column headers */
    --control-height: 22px;
    --input-padding-y: 2px;
    --input-padding-x: 6px;
    --select-padding-y: 1px;
    --select-padding-x: 6px;
    --select-padding-end: 18px;

    /* Radius */
    --radius-sm: 2px;
    --radius-md: 4px;
    --radius-lg: 6px;

    /* Shadows & overlay */
    --shadow-modal: 4px 4px 12px rgba(0, 0, 0, 0.25);
    --shadow-dropdown: 2px 2px 5px rgba(0, 0, 0, 0.2);
    --shadow-overlay: rgba(0, 0, 0, 0.4);

    /* Markdown / content headings */
    --heading-xl: 1.45rem;
    --heading-lg: 1.18rem;
    --heading-md: 1.08rem;
    --heading-sm: 1rem;

    /* Legacy aliases (existing rules) */
    --font-size: var(--font-size-base);
    --bg: var(--bg-app);
    --bg-dark: var(--bg-app-dark);
    --border: var(--border-default);
    --text: var(--color-text);
    --title-bg: var(--title-bar-bg);
    --inset-light: var(--bg-surface);
    --inset-dark: var(--border-dark);
}