/* Fixed brand tokens. Product pages share the darker violet; no theme selector or persisted palette. */
:root {
    color-scheme: light;
    --color-page: #ffffff;
    --color-page-subtle: #f6f8fa;
    --color-surface: #ffffff;
    --color-surface-raised: #ffffff;
    --color-surface-muted: #eef2f5;
    --color-text: #111315;
    --color-text-soft: #424850;
    --color-text-muted: #68717c;
    --color-border: #cfd6dd;
    --color-border-soft: #e5e9ed;
    --color-primary: #1c1c1e;
    --color-primary-hover: #343438;
    --color-primary-soft: #ececef;
    --color-on-primary: #ffffff;
    --color-accent: #38c5f0;
    --color-accent-strong: #087ea4;
    --color-action: #46ff91;
    --color-action-hover: #22df70;
    --color-on-action: #102018;
    --color-focus: #087ea4;
    --color-success: #16803b;
    --color-overlay: rgba(7, 10, 16, 0.84);
    --shadow-color: rgba(0, 0, 0, 0.12);
    --shadow-soft: 0 0.25rem 1rem rgba(0, 0, 0, 0.08);
    --shadow-raised: 0 0.75rem 2rem rgba(0, 0, 0, 0.12);
    --header-background: #1c1c1e;
    --header-text: #f7f7f8;
    --header-panel: rgba(28, 28, 30, 0.97);
    --particle-start: #087ea4;
    --particle-end: #38c5f0;
    --particle-glow: rgba(56, 197, 240, 0.55);
    --code-background: #f3f5f7;
    --demo-sensor: #0284c7;
    --demo-sensor-bg: #eff6ff;
    --demo-mes: #15803d;
    --demo-mes-bg: #f0fdf4;
    --demo-erp: #c2410c;
    --demo-erp-bg: #fff7ed;
    --demo-warning: #b45309;
    --demo-warning-bg: #fef3c7;
    --demo-highlight-soft: #fef9c3;
    --demo-highlight-strong: #fcd34d;
    --demo-highlight-border: #f59e0b;
    --demo-highlight-text: #1a202c;
    --header-control-border: rgba(255, 255, 255, 0.45);
    --header-control-background: rgba(255, 255, 255, 0.1);
    --header-control-hover: rgba(255, 255, 255, 0.09);

    --slate-50: #f8fafc;
    --slate-100: #f1f5f9;
    --slate-200: #e2e8f0;
    --slate-300: #cbd5e1;
    --slate-400: #94a3b8;
    --slate-500: #64748b;
    --slate-600: #475569;
    --slate-700: #334155;
    --slate-800: #1e293b;
    --slate-900: #0f172a;
    --blue-600: #1d4ed8;
    --blue-bg: #eff6ff;
    --green-600: #047857;
    --green-bg: #ecfdf5;
    --purple-600: #7e22ce;
    --purple-bg: #faf5ff;
    --red-100: #fee2e2;
    --red-500: #ef4444;
    --red-600: #be123c;
    --red-bg: #fef2f2;
}

.page-edge,
.page-lakehouse {
    --color-primary: #6d28d9;
    --color-primary-hover: #5b21b6;
    --color-primary-soft: #f1eafe;
    --color-on-primary: #ffffff;
    --color-accent: #ffe546;
    --color-accent-strong: #8a6900;
    --color-action: #46ff91;
    --color-action-hover: #24df72;
    --color-focus: #6d28d9;
    --header-background: #6d28d9;
    --header-text: #ffffff;
    --header-panel: rgba(91, 33, 182, 0.97);
    --particle-start: #6d28d9;
    --particle-end: #a873ff;
    --particle-glow: rgba(109, 40, 217, 0.48);
}


:root {
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    --content-width: 60rem;
    --wide-content-width: 75rem;
    --header-min-height: 5.25rem;
    --header-height: var(--header-min-height);
    --radius-sm: 0.35rem;
    --radius-md: 0.625rem;
    --radius-lg: 1rem;
    --radius-pill: 999px;
    --transition-fast: 160ms;
    --transition-normal: 300ms;

    /* Compatibility aliases for the self-contained visual examples. */
    --iotedge-purple: var(--color-primary);
    --iotedge-purple-1: var(--color-primary-hover);
    --iotedge-yellow-0: var(--color-accent);
    --iotedge-green-0: var(--color-action);
    --iotedge-green-4: var(--color-action-hover);
    --iotedge-divider: var(--color-border);
    --github-light-purple: var(--color-primary);
    --baby-pink: #ff94c2;
    --highlight-yellow: var(--color-accent);
    --background-light: var(--color-surface);
    --background-dark: var(--color-page-subtle);
    --text-color: var(--color-text);
    --text-color-1: var(--color-text-muted);
    --text-color-iot-edge: var(--color-text-soft);
    --transition-speed: var(--transition-normal);
}

@media (max-width: 64rem) {
    :root { --header-min-height: 4rem; }
}