/*
 * DdtTheme tokens (--ddt-*) for the WebEditor and WebImages components, matched to common.css.
 * Copied from Projects/WebEditorService/wwwroot/themes/ai4users.css with the selectors switched to this site's
 * html[data-theme="light|dark"]; the dark defaults of ddt-theme.css follow data-mode, which ai4UsersTheme sets too.
 */

/* Both modes: the type, the rounder shapes. */
:root {
    --ddt-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --ddt-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    --ddt-radius-sm: 8px;
    --ddt-radius: 10px;
    --ddt-radius-lg: 16px;
    --ddt-table-head-case: uppercase;
    --ddt-table-head-spacing: 0.06em;
    --ddt-header-text: #fff;
    --ddt-header-muted: rgba(235, 244, 255, 0.86);
    --ddt-header-hover: rgba(255, 255, 255, 0.12);
    --ddt-header-active-bg: rgba(255, 255, 255, 0.18);
    --ddt-header-active-text: #fff;
    --ddt-header-border: rgba(255, 255, 255, 0.18);
}

html:not([data-theme="dark"]) {
    --ddt-app-bg:
        radial-gradient(circle at 10% -10%, rgba(220, 230, 255, 0.7), transparent 32rem),
        radial-gradient(circle at 86% 8%, rgba(230, 237, 255, 0.72), transparent 30rem),
        #f6f7fb;
    --ddt-surface-subtle: #f1f3f8;
    --ddt-surface-raised: #fbfcff;
    --ddt-surface-muted: #eef1f8;
    --ddt-surface-sunken: #e6ebf3;
    --ddt-hover: #e9eef7;

    --ddt-text: #111827;
    --ddt-text-muted: #4b5563;
    --ddt-text-subtle: #6b7280;
    --ddt-text-faint: #9ca3af;
    --ddt-caret: #111827;

    --ddt-border: #d8dce6;
    --ddt-border-soft: #e5e9f0;
    --ddt-border-strong: #b7c5d8;
    --ddt-border-contrast: #9aaabe;

    --ddt-accent: #075ca8;
    --ddt-accent-rgb: 7, 92, 168;
    --ddt-accent-strong: #034f94;
    --ddt-accent-soft: #dbe8f5;
    --ddt-accent-subtle: #edf4ff;
    --ddt-accent-border: #b7cbe1;
    --ddt-focus-rgb: 47, 94, 246;

    --ddt-info: #075ca8;
    --ddt-info-rgb: 7, 92, 168;
    --ddt-info-mark: #2f5ef6;
    --ddt-info-text: #03305a;
    --ddt-info-bg: #e6edff;
    --ddt-info-bg-subtle: #f5f8ff;
    --ddt-info-border: #9db8f0;

    --ddt-success: #15803d;
    --ddt-success-mark: #16a34a;
    --ddt-success-text: #14532d;
    --ddt-success-bg: #dcfce7;
    --ddt-success-border: #86efac;

    --ddt-warning: #b45309;
    --ddt-warning-mark: #d97706;
    --ddt-warning-text: #4a2b00;
    --ddt-warning-bg: #fef3c7;
    --ddt-warning-border: #e5b246;
    --ddt-highlight: #ffecaa;
    --ddt-highlight-border: #e5b246;

    --ddt-danger: #b91c1c;
    --ddt-danger-strong: #991b1b;
    --ddt-danger-bg: #fee2e2;
    --ddt-danger-bg-subtle: #fef2f2;
    --ddt-danger-border: #fecaca;
    --ddt-danger-border-strong: #f87171;

    --ddt-code-bg: #f1f3f8;
    --ddt-chart-grid: #e5e9f0;
    --ddt-chart-frame: #cfd6e4;

    --ddt-shadow-rgb: 15, 23, 42;

    --ddt-header-bg:
        radial-gradient(circle at 76% 18%, rgba(86, 145, 220, 0.18), transparent 34rem),
        linear-gradient(180deg, #043966 0%, #043f73 52%, #055a96 100%);
    --ddt-header-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.12), 0 4px 14px rgba(3, 48, 90, 0.22);
    --ddt-table-head-bg: radial-gradient(circle at center, #0a68ad 10%, #055a96 34%, #043966 90%);
    --ddt-table-head-text: #f4f8ff;
    --ddt-table-head-border: #064a80;
}

html[data-theme="dark"] {
    --ddt-app-bg:
        radial-gradient(circle at 10% -10%, rgba(23, 45, 82, 0.7), transparent 32rem),
        radial-gradient(circle at 86% 8%, rgba(23, 45, 82, 0.72), transparent 30rem),
        #07111f;
    --ddt-surface: #0f1b2d;
    --ddt-surface-rgb: 15, 27, 45;
    --ddt-surface-subtle: #101827;
    --ddt-surface-raised: #142238;
    --ddt-surface-muted: #16263d;
    --ddt-surface-sunken: #0b1728;
    --ddt-hover: #1a2b43;

    --ddt-text: #f3f7ff;
    --ddt-text-muted: #b6c2d4;
    --ddt-text-subtle: #9ca3af;
    --ddt-text-faint: #6b7a90;
    --ddt-caret: #f3f7ff;

    --ddt-border: #26364f;
    --ddt-border-soft: #1d2b40;
    --ddt-border-strong: #3b4b66;
    --ddt-border-contrast: #9fb4ca;

    --ddt-accent: #4f7cff;
    --ddt-accent-rgb: 79, 124, 255;
    --ddt-accent-strong: #8fb0ff;
    --ddt-accent-soft: #172d52;
    --ddt-accent-subtle: #10213a;
    --ddt-accent-border: #2d4a7a;
    --ddt-focus-rgb: 79, 124, 255;

    --ddt-info: #8cc2ff;
    --ddt-info-rgb: 140, 194, 255;
    --ddt-info-mark: #4f7cff;
    --ddt-info-text: #b8d8ff;
    --ddt-info-bg: #10213a;
    --ddt-info-bg-subtle: #0d1a2e;
    --ddt-info-border: #2d4a7a;

    --ddt-success: #4ade80;
    --ddt-success-mark: #22c55e;
    --ddt-success-text: #bbf7d0;
    --ddt-success-bg: #15351f;
    --ddt-success-border: #166534;

    --ddt-warning: #fbbf24;
    --ddt-warning-mark: #f59e0b;
    --ddt-warning-text: #fde68a;
    --ddt-warning-bg: #3f2d11;
    --ddt-warning-border: #92400e;
    --ddt-highlight: #5b4410;
    --ddt-highlight-border: #92400e;

    --ddt-danger: #f87171;
    --ddt-danger-strong: #fca5a5;
    --ddt-danger-bg: #3d171b;
    --ddt-danger-bg-subtle: #2a1215;
    --ddt-danger-border: #7f1d1d;
    --ddt-danger-border-strong: #dc2626;

    --ddt-code-bg: #0b1728;
    --ddt-chart-bg: #0f1b2d;
    --ddt-chart-text: #f3f7ff;
    --ddt-chart-muted: #9ca3af;
    --ddt-chart-grid: #26364f;
    --ddt-chart-frame: #3b4b66;

    --ddt-header-bg:
        radial-gradient(circle at 76% 18%, rgba(86, 145, 220, 0.10), transparent 34rem),
        linear-gradient(180deg, #044b83 0%, #03345f 52%, #071827 100%);
    --ddt-header-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.08), 0 4px 14px rgba(0, 0, 0, 0.35);
    --ddt-table-head-bg: radial-gradient(circle at center, #244469 10%, #172b45 34%, #090f1a 90%);
    --ddt-table-head-text: #dbe6f5;
    --ddt-table-head-border: #23314a;
}