/*
 * CTP shared design tokens.
 *
 * This file is the source of truth for new CTP.Web and CTP.DLMS content-area
 * UI. Legacy variable names remain as aliases so feature work can migrate
 * incrementally without changing business behavior.
 */

:root {
    color-scheme: light;

    --ctp-font-sans: "Segoe UI Variable", "Segoe UI", "Microsoft YaHei UI", "Microsoft YaHei", "PingFang SC", sans-serif;
    --ctp-font-mono: "Cascadia Mono", "Cascadia Code", Consolas, "SFMono-Regular", monospace;
    --ctp-font-size-min: 10px;
    --ctp-font-weight-body: 400;
    --ctp-font-weight-helper: 500;
    --ctp-font-weight-control: 600;
    --ctp-font-weight-title: 700;
    --ctp-font-size-page-title: max(14px, calc(var(--scheme-font-title, 12px) + 2px));
    --ctp-font-size-section-title: max(12px, var(--scheme-font-section, 12px));
    --ctp-font-size-body: max(var(--ctp-font-size-min), var(--scheme-font-body, 10px));
    --ctp-font-size-control: max(var(--ctp-font-size-min), var(--scheme-font-control, 10px));
    --ctp-font-size-helper: max(var(--ctp-font-size-min), var(--scheme-font-meta, 9px));

    --ctp-color-primary: #1f6f8b;
    --ctp-color-primary-deep: #185a72;
    --ctp-color-highlight: #2a86a3;
    --ctp-color-on-primary: #ffffff;
    --ctp-color-on-status-solid: #ffffff;

    --ctp-color-page: #f7fafc;
    --ctp-color-page-subtle: #eef4f7;
    --ctp-color-surface: #ffffff;
    --ctp-color-surface-muted: #f6f9fb;
    --ctp-color-surface-raised: #ffffff;
    --ctp-color-surface-inset: #f1f6f8;
    --ctp-color-action-soft: #eef6f8;
    --ctp-color-selected: #eaf5f8;
    --ctp-color-line: #d8e4eb;
    --ctp-color-line-strong: #bdd1dc;
    --ctp-color-line-interactive: #9fc4d2;

    --ctp-color-text: #102331;
    --ctp-color-text-strong: #081923;
    --ctp-color-control-text: #2f4454;
    --ctp-color-helper: #526676;
    --ctp-color-helper-strong: #405363;
    --ctp-color-info: #526779;

    --ctp-color-success: var(--ctp-color-primary);
    --ctp-color-success-text: var(--ctp-color-primary-deep);
    --ctp-color-success-bg: var(--ctp-color-selected);
    --ctp-color-success-border: #bdd7e0;
    --ctp-color-warning: #92713b;
    --ctp-color-warning-text: #6e5621;
    --ctp-color-warning-bg: #faf5e6;
    --ctp-color-warning-border: #ddd0aa;
    --ctp-color-danger: #a94b45;
    --ctp-color-danger-text: #8a3a35;
    --ctp-color-danger-bg: #fbf1f0;
    --ctp-color-danger-border: #e0c2bf;
    --ctp-color-info-bg: #f1f5f8;
    --ctp-color-info-border: #cbd8e0;

    --ctp-space-1: 4px;
    --ctp-space-2: 8px;
    --ctp-space-3: 12px;
    --ctp-space-4: 16px;
    --ctp-space-6: 24px;

    --ctp-radius-control: 6px;
    --ctp-radius-card: 8px;
    --ctp-radius-dialog: 8px;
    --ctp-radius-pill: 999px;
    --ctp-radius-none: 0;

    --ctp-shadow-subtle: 0 1px 2px rgba(20, 47, 60, .06);
    --ctp-shadow-card: 0 2px 6px rgba(20, 47, 60, .07);
    --ctp-shadow-floating: 0 6px 16px rgba(20, 47, 60, .10);
    --ctp-shadow-dialog: 0 12px 28px rgba(20, 47, 60, .12);
    --ctp-focus-ring: 0 0 0 3px rgba(31, 111, 139, .18);
    --ctp-icon-size-sm: 16px;
    --ctp-icon-size-nav: 18px;
    --ctp-icon-size-md: 20px;
    --ctp-icon-size-lg: 24px;
    --ctp-control-height: 32px;
    --ctp-content-max-width: 1600px;
    --ctp-motion-fast: 120ms;
    --ctp-motion-standard: 160ms;
    --ctp-ease-standard: ease-out;
    --ctp-transition-interactive: color var(--ctp-motion-fast) var(--ctp-ease-standard), background-color var(--ctp-motion-fast) var(--ctp-ease-standard), border-color var(--ctp-motion-fast) var(--ctp-ease-standard), box-shadow var(--ctp-motion-fast) var(--ctp-ease-standard), opacity var(--ctp-motion-fast) var(--ctp-ease-standard);

    --ctp-z-sticky: 20;
    --ctp-z-dropdown: 1050;
    --ctp-z-modal: 1080;
    --ctp-z-toast: 1100;

    /* Legacy aliases used throughout existing Web and DLMS pages. */
    --font-family: var(--ctp-font-sans);
    --primary: var(--ctp-color-primary);
    --primary-hover: var(--ctp-color-primary-deep);
    --primary-dark: var(--ctp-color-primary-deep);
    --primary-contrast: var(--ctp-color-on-primary);
    --accent: var(--ctp-color-primary);
    --ink: var(--ctp-color-text);
    --surface: var(--ctp-color-surface);
    --app-surface: var(--ctp-color-surface);
    --app-surface-muted: var(--ctp-color-surface-muted);
    --app-surface-subtle: var(--ctp-color-page-subtle);
    --app-line: var(--ctp-color-line);
    --border-color: var(--ctp-color-line);
    --control-line: var(--ctp-color-line);
    --action-bg: var(--ctp-color-action-soft);
    --app-helper-text: var(--ctp-color-helper);
    --app-helper-text-strong: var(--ctp-color-helper-strong);
    --danger: var(--ctp-color-danger);
    --success: var(--ctp-color-success);
    --warning: var(--ctp-color-warning);
    --status-ok: var(--ctp-color-success);
    --status-ok-text: var(--ctp-color-success-text);
    --status-ok-bg: var(--ctp-color-success-bg);
    --status-ok-bg-soft: var(--ctp-color-action-soft);
    --status-ok-border: var(--ctp-color-success-border);
    --status-warning: var(--ctp-color-warning);
    --status-warning-text: var(--ctp-color-warning-text);
    --status-warning-bg: var(--ctp-color-warning-bg);
    --status-warning-border: var(--ctp-color-warning-border);
    --status-danger: var(--ctp-color-danger);
    --status-danger-text: var(--ctp-color-danger-text);
    --status-danger-bg: var(--ctp-color-danger-bg);
    --status-danger-border: var(--ctp-color-danger-border);
    --status-info: var(--ctp-color-info);
    --status-info-text: var(--ctp-color-helper-strong);
    --status-info-bg: var(--ctp-color-info-bg);
    --status-info-border: var(--ctp-color-info-border);
    --card-radius: var(--ctp-radius-card);
    --control-radius: var(--ctp-radius-control);
    --shadow-sm: var(--ctp-shadow-subtle);
    --control-panel-shadow: var(--ctp-shadow-subtle);
    --shadow-md: var(--ctp-shadow-dialog);
    --muted: #627482;
    --app-menu-item-ink: #2f4050;
    --app-menu-item-muted: #8794a0;
    --status-ok-shadow: rgba(31, 111, 139, .14);

    /* Ant-style and legacy control aliases. */
    --ant-border-color: var(--ctp-color-line);
    --ant-bg-container: var(--ctp-color-surface);
    --ant-bg-layout: var(--ctp-color-page-subtle);
    --ant-text-secondary: #627482;
    --ant-primary: var(--ctp-color-primary);
    --control-surface: var(--ctp-color-surface-muted);
    --control-ink: var(--ctp-color-text);
    --control-accent: var(--ctp-color-primary);

    /* Bootstrap semantic normalization. */
    --bs-primary: #1f6f8b;
    --bs-primary-rgb: 31, 111, 139;
    --bs-primary-text-emphasis: #185a72;
    --bs-primary-bg-subtle: #eaf5f8;
    --bs-primary-border-subtle: #bdd7e0;
    --bs-success: #1f6f8b;
    --bs-success-rgb: 31, 111, 139;
    --bs-success-text-emphasis: #185a72;
    --bs-success-bg-subtle: #eaf5f8;
    --bs-success-border-subtle: #bdd7e0;
    --bs-warning: #92713b;
    --bs-warning-rgb: 146, 113, 59;
    --bs-warning-text-emphasis: #6e5621;
    --bs-warning-bg-subtle: #faf5e6;
    --bs-warning-border-subtle: #ddd0aa;
    --bs-danger: #a94b45;
    --bs-danger-rgb: 169, 75, 69;
    --bs-danger-text-emphasis: #8a3a35;
    --bs-danger-bg-subtle: #fbf1f0;
    --bs-danger-border-subtle: #e0c2bf;
}