:root {
    color-scheme: light;
    --lahy-bg: #e8eee7;
    --lahy-surface: #f5f6ef;
    --lahy-surface-soft: #d9e3d9;
    --lahy-surface-glass: rgba(245, 246, 239, .78);
    --lahy-sidebar: #dfe8df;
    --lahy-border: #bdcbbf;
    --lahy-border-strong: #789486;
    --lahy-text: #1c2b27;
    --lahy-muted: #5c6d66;
    --lahy-subtle: #788c83;
    --lahy-accent: #ff7a31;
    --lahy-accent-soft: rgba(255, 122, 49, .12);
    --lahy-accent-glow: rgba(255, 122, 49, .26);
    --lahy-highlight: #d8ff7b;
    --lahy-cyan: #35e7ff;
    --lahy-radius-sm: 12px;
    --lahy-radius: 18px;
    --lahy-radius-lg: 24px;
    --lahy-shadow: 0 16px 44px rgba(31, 65, 53, .08);
    --lahy-shadow-md: 0 22px 60px rgba(31, 65, 53, .13);
    --lahy-font-body: "Noto Sans Arabic", sans-serif;
    --lahy-font-display: "Noto Kufi Arabic", "Noto Sans Arabic", sans-serif;
}

html.dark,
html.cms-dark {
    color-scheme: dark;
    --lahy-bg: #1d2b27;
    --lahy-surface: #273b34;
    --lahy-surface-soft: #31483f;
    --lahy-surface-glass: rgba(39, 59, 52, .8);
    --lahy-sidebar: #23352f;
    --lahy-border: #48655a;
    --lahy-border-strong: #7da08f;
    --lahy-text: #f1f3eb;
    --lahy-muted: #bdcbc3;
    --lahy-subtle: #93aa9f;
    --lahy-shadow: 0 18px 48px rgba(4, 16, 12, .2);
    --lahy-shadow-md: 0 24px 72px rgba(4, 16, 12, .3);
}

.lahy-system {
    color: var(--lahy-text);
    background-color: var(--lahy-bg);
    font-family: var(--lahy-font-body);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.lahy-pattern-bg {
    background-color: var(--lahy-bg);
    background-image:
        radial-gradient(circle at 8% 18%, rgba(71, 183, 185, .12), transparent 24%),
        radial-gradient(circle at 92% 82%, rgba(216, 255, 123, .13), transparent 22%),
        linear-gradient(color-mix(in srgb, var(--lahy-border-strong) 10%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--lahy-border-strong) 10%, transparent) 1px, transparent 1px);
    background-size: auto, auto, 80px 80px, 80px 80px;
}

.lahy-glass {
    border: 1px solid color-mix(in srgb, var(--lahy-border) 82%, transparent);
    background: var(--lahy-surface-glass);
    -webkit-backdrop-filter: blur(18px) saturate(130%);
    backdrop-filter: blur(18px) saturate(130%);
    box-shadow: var(--lahy-shadow);
}

.lahy-surface {
    border: 1px solid var(--lahy-border);
    border-radius: var(--lahy-radius);
    background: var(--lahy-surface-glass);
    box-shadow: var(--lahy-shadow);
}

.lahy-input {
    width: 100%;
    border: 1px solid var(--lahy-border);
    border-radius: var(--lahy-radius-sm);
    color: var(--lahy-text);
    background: color-mix(in srgb, var(--lahy-surface) 88%, transparent);
    transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.lahy-input:focus {
    outline: none;
    border-color: var(--lahy-accent);
    box-shadow: 0 0 0 3px var(--lahy-accent-soft);
    background: var(--lahy-surface);
}

.lahy-primary-action {
    border: 1px solid var(--lahy-accent);
    border-radius: var(--lahy-radius-sm);
    color: #fff;
    background: var(--lahy-accent);
    box-shadow: 0 10px 28px var(--lahy-accent-glow);
}

html[lang="ku"] .lahy-system,
html[lang="ku"] .lahy-system button,
html[lang="ku"] .lahy-system input,
html[lang="ku"] .lahy-system textarea,
html[lang="ku"] .lahy-system select {
    font-family: var(--lahy-font-body);
}

html[lang="ku"] .lahy-display {
    font-family: var(--lahy-font-display);
    line-height: 1.35;
}