/* Semantic colors shared by cepui and its consumers. Tailwind's custom-property
   utilities refer to these tokens, including hover and opacity variants. */
:root {
    color-scheme: light;
    --cep-canvas: #fafafa;
    --cep-surface: #ffffff;
    --cep-subtle: #f5f5f5;
    --cep-muted-surface: #e5e5e5;
    --cep-divider: #d4d4d4;
    --cep-text: #404040;
    --cep-heading: #171717;
    --cep-secondary: #525252;
    --cep-muted: #6b6b6b;
    --cep-faint: #6b6b6b;
    --cep-border: #e5e5e5;
    --cep-border-soft: #e5e5e5;
    --cep-input-border: #d4d4d4;
    --cep-accent: #2563eb;
    --cep-accent-strong: #1d4ed8;
    --cep-accent-soft: #eff6ff;
    --cep-accent-muted: #dbeafe;
    --cep-accent-border: #bfdbfe;
    --cep-danger: #b91c1c;
    --cep-danger-soft: #fef2f2;
    --cep-danger-muted: #fee2e2;
    --cep-danger-border: #fecaca;
    --cep-success: #15803d;
    --cep-success-soft: #f0fdf4;
    --cep-success-muted: #dcfce7;
    --cep-success-border: #bbf7d0;
    --cep-warning: #a16207;
    --cep-warning-soft: #fffbeb;
    --cep-warning-muted: #fef3c7;
    --cep-warning-border: #fcd34d;
    --cep-inverse: #171717;
    --cep-inverse-hover: #262626;
    --cep-inverse-text: #ffffff;
    --cep-chart-grid: #e5e5e5;
    --cep-graph-edge: #64748b;
    --cep-indigo: #4338ca;
    --cep-indigo-soft: #eef2ff;
    --cep-indigo-muted: #e0e7ff;
    --cep-indigo-border: #c7d2fe;
    --cep-purple: #7e22ce;
    --cep-purple-muted: #f3e8ff;
    --cep-pink: #be185d;
    --cep-pink-muted: #fce7f3;
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --cep-canvas: #171717;
    --cep-surface: #262626;
    --cep-subtle: #303030;
    --cep-muted-surface: #404040;
    --cep-divider: #525252;
    --cep-text: #d4d4d4;
    --cep-heading: #fafafa;
    --cep-secondary: #bdbdbd;
    --cep-muted: #a3a3a3;
    --cep-faint: #a3a3a3;
    --cep-border: #454545;
    --cep-border-soft: #383838;
    --cep-input-border: #737373;
    --cep-accent: #60a5fa;
    --cep-accent-strong: #93c5fd;
    --cep-accent-soft: #172554;
    --cep-accent-muted: #1e3a5f;
    --cep-accent-border: #375a86;
    --cep-danger: #fca5a5;
    --cep-danger-soft: #3b1c22;
    --cep-danger-muted: #4c2228;
    --cep-danger-border: #85414b;
    --cep-success: #86efac;
    --cep-success-soft: #173324;
    --cep-success-muted: #20412c;
    --cep-success-border: #386b47;
    --cep-warning: #fcd34d;
    --cep-warning-soft: #352a17;
    --cep-warning-muted: #45351c;
    --cep-warning-border: #806332;
    --cep-inverse: #e5e5e5;
    --cep-inverse-hover: #fafafa;
    --cep-inverse-text: #171717;
    --cep-chart-grid: #454545;
    --cep-graph-edge: #a3a3a3;
    --cep-indigo: #c7d2fe;
    --cep-indigo-soft: #242044;
    --cep-indigo-muted: #312e58;
    --cep-indigo-border: #5b5185;
    --cep-purple: #d8b4fe;
    --cep-purple-muted: #3c2550;
    --cep-pink: #f9a8d4;
    --cep-pink-muted: #4a2035;
}

body {
    background-color: var(--cep-canvas);
    color: var(--cep-text);
}

input, select, textarea {
    accent-color: var(--cep-accent);
}

input::placeholder, textarea::placeholder {
    color: var(--cep-muted);
    opacity: 1;
}