:root {
    color-scheme: light dark;

    --cyfer-pink-color: #d4145a;
    --cyfer-purple-color: #1b1464;
    --cyfer-indigo-color: #5b52e0;
    --cyfer-primary-color: light-dark(var(--cyfer-purple-color), var(--cyfer-indigo-color));

    --cyfer-page-background-color: light-dark(#fff, #141417);
    --cyfer-page-foreground-color: light-dark(#1a1a1f, #ececf1);
    --cyfer-surface-color: light-dark(#f6f6f8, #1c1c21);
    --cyfer-dim-text-color: light-dark(#5c5c66, #a6a6b0);
    --cyfer-divider-color: light-dark(#e5e5ea, #2e2e35);
    --cyfer-link-color: light-dark(#4a3fb8, #a9a4ff);

    --cyfer-chat-system-background-color: var(--cyfer-page-background-color);
    --cyfer-chat-user-background-color: light-dark(#cfe4fa, #0f6cbd);

    --cyfer-action-button-background-color: var(--cyfer-primary-color);
    --cyfer-action-button-hover-background-color: light-dark(#2a2280, #6c64e8);
    --cyfer-action-button-pressed-background-color: light-dark(#120d48, #4d44c9);
    --cyfer-action-button-foreground-color: #fff;
    --cyfer-control-border-color: light-dark(#8a8a94, #74747e);
    --cyfer-control-hover-border-color: light-dark(#5c5c66, #a6a6b0);
    --cyfer-control-focus-border-color: var(--cyfer-primary-color);
    --cyfer-control-background-color: light-dark(#fff, #1c1c21);
    --cyfer-control-height: 2.5rem;
    --cyfer-control-disabled-opacity: 0.55;
    --cyfer-danger-color: light-dark(#c42b1c, #ff8a80);
    --cyfer-danger-surface-color: light-dark(#fdf3f2, #2e1a1a);
    --cyfer-danger-border-color: light-dark(#f1bbbc, #6b2b2b);
    --cyfer-success-color: light-dark(#107c10, #6ccb5f);
    --cyfer-success-surface-color: light-dark(#f1faf1, #17261a);
    --cyfer-elevation-shadow: light-dark(
        0 8px 24px rgba(20, 20, 40, 0.14), 0 8px 24px rgba(0, 0, 0, 0.5));

    --cyfer-overlay-opacity: 0.6;
    --cyfer-overlay-scrim-color: light-dark(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.65));
    --cyfer-acrylic-tint-color: light-dark(
        color-mix(in srgb, var(--cyfer-pink-color), transparent 97%),
        color-mix(in srgb, var(--cyfer-purple-color), transparent 75%));
    --cyfer-acrylic-shadow-color: rgba(128, 128, 128, 0.1);

    --cyfer-list-item-selected-background-color: light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1));
    --cyfer-list-item-hover-background-color: light-dark(rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.05));

    --cyfer-font-family-sans: 'Segoe UI Variable Text', 'Segoe UI', -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', Arial, sans-serif;
    --cyfer-font-family-mono: ui-monospace, "Cascadia Mono", "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
    --cyfer-font-family-icon: 'Material Symbols Outlined';

    --cyfer-font-size-caption: 0.6875rem;
    --cyfer-font-size-small: 0.75rem;
    --cyfer-font-size-body: 0.875rem;
    --cyfer-font-size-large: 1rem;
    --cyfer-font-size-title: 1.25rem;
    --cyfer-font-size-headline: 1.75rem;
    --cyfer-font-size-display: clamp(2.25rem, 4vw, 3.75rem);
    --cyfer-font-size-icon-small: 1.25rem;
    --cyfer-font-size-icon: 24px;
    --cyfer-font-size-icon-large: 2rem;

    --cyfer-font-weight-regular: 400;
    --cyfer-font-weight-semibold: 600;
    --cyfer-font-weight-bold: 700;

    --cyfer-radius-small: 4px;
    --cyfer-radius-medium: 8px;
    --cyfer-radius-large: 12px;
    --cyfer-space-xsmall: 0.25rem;
    --cyfer-space-small: 0.5rem;
    --cyfer-space-medium: 1rem;
    --cyfer-space-large: 1.5rem;
    --cyfer-space-xlarge: 2rem;

    --cyfer-focus-ring-color: light-dark(var(--cyfer-pink-color), #ff4d8d);
    --cyfer-focus-ring-width: 2px;
    --cyfer-focus-ring-offset: 2px;
}