:root {
    /* === Brand colors === */
    --hd-petrol: #024a55;
    --hd-petrol-deep: #013a42;
    --hd-petrol-darker: #022a30;
    --hd-petrol-soft: #e3edec;
    --hd-footer-bg: var(--hd-petrol-darker);
    --hd-pink: #c1348b;
    --hd-pink-soft: #fbe6ef;

    /* === Feature-card "b" gradient (deeper variant) === */
    --hd-feat-b-from: #135f64;
    --hd-feat-b-to: #082c30;

    /* === Hero background gradient === */
    --hd-hero-bg-from: #367a82;
    --hd-hero-bg-to: #314e59;

    /* === Pure white reference (stays constant across themes) === */
    --hd-white: #ffffff;

    /* === Semantic neutral surface/text/border slots (mode-dependent) === */
    --hd-surface: #f5f5f4;
    --hd-surface-elevated: #ededeb;
    --hd-surface-card: #ffffff;
    --hd-fg: #14201f;
    --hd-fg-muted: #475352;
    --hd-fg-faint: #7d8786;
    --hd-border: #e2e0d8;
    --hd-border-strong: #c8c5ba;

    /* === Legacy neutral aliases (existing components read these; they now follow the semantic slots) === */
    --hd-paper: var(--hd-surface);
    --hd-paper-2: var(--hd-surface-elevated);
    --hd-card: var(--hd-surface-card);
    --hd-ink: var(--hd-fg);
    --hd-ink-soft: var(--hd-fg-muted);
    --hd-ink-faint: var(--hd-fg-faint);
    --hd-line: var(--hd-border);
    --hd-line-strong: var(--hd-border-strong);

    /* === Extra brand shades === */
    --hd-brand-teal-hover: #067b83;
    --hd-brand-magenta-strong: #dd35bc;

    /* === Status colors === */
    --hd-success: #65bc7b;
    --hd-warning: #ffc107;
    --hd-error: #f44336;

    /* === Alpha overlays on brand backgrounds === */
    --hd-overlay-white-soft: rgba(255, 255, 255, 0.08);
    --hd-overlay-white-mid: rgba(255, 255, 255, 0.10);
    --hd-overlay-white-strong: rgba(255, 255, 255, 0.16);
    --hd-overlay-black-soft: rgba(0, 0, 0, 0.18);
    --hd-text-on-brand-mid: rgba(255, 255, 255, 0.78);
    --hd-text-on-brand-soft: rgba(255, 255, 255, 0.72);

    /* === Shadow / backdrop tint RGB triples (consumed via rgba(var(...), alpha)) === */
    --hd-shadow-color: 8, 57, 61;
    --hd-shadow-color-ink: 20, 32, 31;
    --hd-shadow-color-brand: 2, 74, 85;

    /* === Radii === */
    --hd-radius-sm: 12px;
    --hd-radius: 12px;
    --hd-radius-lg: 18px;
    --hd-radius-pill: 999px;

    /* === Per-element radii (theme-editor controllable) === */
    --hd-radius-button: var(--hd-radius-sm);
    --hd-radius-chip: var(--hd-radius-pill);
    --hd-radius-input: var(--hd-radius-sm);

    /* === Border widths === */
    --hd-bw: 1px;
    --hd-bw-strong: 3px;

    /* === Font family === */
    --hd-font-family: "Roboto", "Helvetica", "Arial", sans-serif;
    --hd-font-family-heading: var(--hd-font-family);
    --hd-font-family-hero: "Roboto", "Helvetica", "Arial", sans-serif;

    /* === Font sizes === */
    --hd-fs-xs: 11px;
    --hd-fs-sm: 12px;
    --hd-fs-caption: 14px;
    --hd-fs-code: 0.94em;
    --hd-fs-h1: 32px;
    --hd-fs-h2: 20px;
    --hd-fs-h3: 16px;
    --hd-fs-h4: 16px;
    --hd-fs-h5: 14px;
    --hd-fs-h6: 12px;
    --hd-fs-h1-mobile: 22px;
    --hd-fs-h2-mobile: 20px;
    --hd-fs-h3-mobile: 16px;
    --hd-fs-h4-mobile: 16px;
    --hd-fs-h5-mobile: 14px;
    --hd-fs-h6-mobile: 12px;
    --hd-fs-body: 16px;
    --hd-fs-input: 16px;
    --hd-fs-section-title: 32px;
    --hd-fs-hero-title-min: 32px;
    --hd-fs-hero-title-max: 56px;

    /* === Font weights === */
    --hd-fw-medium: 500;
    --hd-fw-semibold: 600;
    --hd-fw-bold: 700;
    --hd-fw-extrabold: 800;

    /* === Shadows === */
    --hd-shadow-sm: 0 1px 0 rgba(var(--hd-shadow-color-ink), 0.04), 0 1px 2px rgba(var(--hd-shadow-color-ink), 0.04);
    --hd-shadow-md: 0 1px 0 rgba(var(--hd-shadow-color-ink), 0.04), 0 6px 18px -8px rgba(var(--hd-shadow-color-ink), 0.18);
    --hd-shadow-lg: 0 1px 0 rgba(var(--hd-shadow-color-ink), 0.04), 0 24px 50px -22px rgba(var(--hd-shadow-color-brand), 0.45);
    --hd-shadow-feat-hover: 0 1px 0 rgba(var(--hd-shadow-color-ink), 0.04), 0 30px 60px -22px rgba(var(--hd-shadow-color-brand), 0.55);
    --hd-shadow-search: 0 1px 0 rgba(255, 255, 255, 0.4) inset, 0 18px 40px -16px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.08);

    /* === Layout === */
    --hd-container: 1120px;
    --hd-header-height: 72px;
    --hd-footer-height: 62px;
    --hd-sidebar-width: 440px;
    --hd-success-dot: #3a9a3a;

    /* === ChatPanel runtime width (set by ChatPanel.razor.js after drag) === */
    --hd-chat-panel-width: min(420px, 100vw);

    /* === Hd UI semantic color slots === */
    --hd-color-primary: var(--hd-petrol);
    --hd-color-primary-deep: var(--hd-petrol-deep);
    --hd-color-primary-soft: var(--hd-petrol-soft);
    --hd-on-primary: var(--hd-white);
    --hd-color-secondary: var(--hd-pink);
    --hd-color-secondary-soft: var(--hd-pink-soft);
    --hd-on-secondary: var(--hd-white);
    --hd-color-tertiary: #6c5ce7;
    --hd-color-tertiary-soft: #eae7ff;
    --hd-on-tertiary: var(--hd-white);
    --hd-color-info: #2563eb;
    --hd-color-info-soft: #dbeafe;
    --hd-on-info: var(--hd-white);
    --hd-color-success: var(--hd-success, #16a34a);
    --hd-color-success-soft: #dcfce7;
    --hd-on-success: var(--hd-white);
    --hd-color-warning: var(--hd-warning, #d97706);
    --hd-color-warning-soft: #fef3c7;
    --hd-on-warning: var(--hd-white);
    --hd-color-error: var(--hd-error, #dc2626);
    --hd-color-error-soft: #fee2e2;
    --hd-on-error: var(--hd-white);

    /* === Hd UI elevation ramp === */
    --hd-elev-0: none;
    --hd-elev-1: var(--hd-shadow-sm);
    --hd-elev-2: var(--hd-shadow-md);
    --hd-elev-3: var(--hd-shadow-lg);
    --hd-elev-4: 0 24px 60px -16px rgba(var(--hd-shadow-color), 0.45);

    /* === HdTextField primitive tokens === */
    --hd-tf-border-color: var(--hd-line);
    --hd-tf-radius: var(--hd-radius-input, 12px);
    --hd-tf-bg: var(--hd-surface-card);
    --hd-tf-control-padding: 8px 12px;
    --hd-tf-control-min-height: 24px;
    --hd-tf-focus-border: var(--hd-color-primary);
    --hd-tf-focus-bg: var(--hd-surface-card);
    --hd-tf-focus-shadow: 0 0 0 3px var(--hd-color-primary-soft);
    --hd-tf-input-fs: var(--hd-fs-body, 16px);
    --hd-tf-input-padding: 2px 0;
    --hd-tf-multi-resize: vertical;
    --hd-tf-multi-min-height: 64px;
    --hd-tf-multi-max-height: none;
    --hd-tf-multi-padding: 6px 0;
    --hd-tf-multi-line-height: 1.5;
    --hd-tf-multi-field-sizing: fixed;
    --hd-tf-multi-fs: var(--hd-fs-body, 16px);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --hd-surface: #121212;
        --hd-surface-elevated: #1c1c1c;
        --hd-surface-card: #1e1e1e;
        --hd-fg: #ededeb;
        --hd-fg-muted: #a8a8a4;
        --hd-fg-faint: #7d7d78;
        --hd-border: #2a2a2a;
        --hd-border-strong: #3a3a3a;
        --hd-petrol: #024a55;
        --hd-petrol-deep: #013a42;
        --hd-petrol-soft: #1a2628;
        --hd-pink: #c1348b;
        --hd-pink-soft: #2a1219;
        --hd-shadow-color: 0, 0, 0;
        --hd-shadow-color-ink: 0, 0, 0;
        --hd-shadow-color-brand: 0, 0, 0;
    }
}

:root[data-theme="dark"] {
    --hd-surface: #121212;
    --hd-surface-elevated: #1c1c1c;
    --hd-surface-card: #1e1e1e;
    --hd-fg: #ededeb;
    --hd-fg-muted: #a8a8a4;
    --hd-fg-faint: #7d7d78;
    --hd-border: #2a2a2a;
    --hd-border-strong: #3a3a3a;
    --hd-petrol: #024a55;
    --hd-petrol-deep: #013a42;
    --hd-petrol-soft: #1a2628;
    --hd-pink: #c1348b;
    --hd-pink-soft: #2a1219;
    --hd-shadow-color: 0, 0, 0;
    --hd-shadow-color-ink: 0, 0, 0;
    --hd-shadow-color-brand: 0, 0, 0;
}