/* The base rules of the PUBLIC pages of Kurason pa Korsou that used to come from the admin stylesheet
   (app.css), which the public pages loaded until the move onto Vsi.Cms (October 2026): the factory
   colours and heading styles as custom properties, the element rules, the article text (kp-content)
   and the hidden error bar of Blazor. Loaded where app.css was, before the design tokens and
   kurason.css, so the public pages look exactly as before. The admin gets its style from the Vsi.Cms package (vsi-admin.css). */

:root {
    --vsi-primary: #eb008c;
    --vsi-primary-dark: #c80077;
    --vsi-primary-soft: #8184bd;
    --vsi-ink: #000000;
    --vsi-ink-soft: #2d3291;
    --vsi-bg: #ffffff;
    --vsi-bg-tint: #f7f7fa;
    
    --vsi-header-bg: #ffffff;
    --vsi-header-text: #2d3291;
    --vsi-header-accent: #eb008c;
    --vsi-header-accent-soft: #8184bd;
    --vsi-footer-bg: #2d3291;
    --vsi-footer-text: #ffffff;
    --vsi-footer-heading: #ffffff;
    --vsi-footer-link: #ffffff;
    --vsi-footer-link-hover: #d9d9d9;
    --vsi-footer-muted: #8184bd;
    
    --vsi-link: #eb008c;
    --vsi-link-hover: #c80077;
    --vsi-code: #2d3291;
    
    --vsi-admin-bg: #2d3291;
    --vsi-admin-text: #ffffff;
    --vsi-admin-hover: #262b7b;
    --vsi-admin-accent: #eb008c;
    
    --kendo-color-primary: var(--vsi-admin-accent);
    
    --vsi-toggle-on: #2e7d32;
    --vsi-toggle-off: #c0392b;
    --vsi-toggle-text: #ffffff;
    --vsi-radius: 6px;
    --vsi-font: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    
    --vsi-h1-color: var(--vsi-ink);
    --vsi-h1-size: 2.3rem;
    --vsi-h1-weight: 700;
    --vsi-h1-spacing: 0em;
    --vsi-h1-transform: none;
    --vsi-h1-align: left;
    --vsi-h2-color: var(--vsi-ink);
    --vsi-h2-size: 1.45rem;
    --vsi-h2-weight: 700;
    --vsi-h2-spacing: 0em;
    --vsi-h2-transform: none;
    --vsi-h2-align: left;
    --vsi-h3-color: var(--vsi-ink);
    --vsi-h3-size: 1.2rem;
    --vsi-h3-weight: 700;
    --vsi-h3-spacing: 0em;
    --vsi-h3-transform: none;
    --vsi-h3-align: left;
    --vsi-h4-color: var(--vsi-ink);
    --vsi-h4-size: 1.05rem;
    --vsi-h4-weight: 700;
    --vsi-h4-spacing: 0em;
    --vsi-h4-transform: none;
    --vsi-h4-align: left;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: var(--vsi-font);
    color: var(--vsi-ink);
    background: var(--vsi-bg);
    line-height: 1.65;
}

body {
    caret-color: transparent;
}

input,
textarea,
select,
[contenteditable="true"] {
    caret-color: auto;
}

:focus {
    outline: none;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
label:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
    outline: 3px solid var(--vsi-primary);
    outline-offset: 2px;
}

a {
    color: var(--vsi-link);
}

a:hover,
a:focus-visible {
    color: var(--vsi-link-hover);
}

code {
    color: var(--vsi-code);
}

.kp-content {
    max-width: 50rem;
}

.kp-content::after {
    content: "";
    display: block;
    clear: both;
}

.kp-content h2 {
    font-size: var(--vsi-h2-size);
    font-weight: var(--vsi-h2-weight);
    letter-spacing: var(--vsi-h2-spacing);
    text-transform: var(--vsi-h2-transform);
    text-align: var(--vsi-h2-align);
    margin: 2rem 0 0.75rem;
    color: var(--vsi-h2-color);
}

.kp-content h3 {
    font-size: var(--vsi-h3-size);
    font-weight: var(--vsi-h3-weight);
    letter-spacing: var(--vsi-h3-spacing);
    text-transform: var(--vsi-h3-transform);
    text-align: var(--vsi-h3-align);
    margin: 1.6rem 0 0.6rem;
    color: var(--vsi-h3-color);
}

.kp-content h4 {
    font-size: var(--vsi-h4-size);
    font-weight: var(--vsi-h4-weight);
    letter-spacing: var(--vsi-h4-spacing);
    text-transform: var(--vsi-h4-transform);
    text-align: var(--vsi-h4-align);
    margin: 1.3rem 0 0.5rem;
    color: var(--vsi-h4-color);
}

.kp-content a {
    color: var(--vsi-primary);
    font-weight: 600;
}

.kp-content ul,
.kp-content ol {
    padding-left: 1.3rem;
}

.kp-content li {
    margin-bottom: 0.4rem;
}

#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}