/* Skin: semitexa-demo — Framework demo site. Terracotta accent on warm cream paper; dark flips to coral on deep ink. Mirrors the legacy demo.css palette.
 * algorithm=manual  source=manual  seed=n/a  generated=2026-06-24T00:00:00+00:00.
 * Generated by semitexa/theme — do not edit manually.
 * Regenerate via `bin/semitexa skins:rebuild semitexa-demo`.
 */
:root {
    color-scheme: light dark;

    /* COLOR — surfaces, borders, text, accent */
    --ui-surface-page:              light-dark(#f5ede3, #0e141b);
    --ui-surface-panel:             light-dark(#fff9f1, #141c25);
    --ui-surface-raised:            light-dark(#fffaf4, #1a232c);
    --ui-surface-sunken:            light-dark(#efe4d5, #0a0f15);
    --ui-border-subtle:             light-dark(#e3d8c6, #26323d);
    --ui-border-strong:             light-dark(#c4b59b, #3a4854);
    --ui-text-primary:              light-dark(#1f1b18, #f2e9e0);
    --ui-text-muted:                light-dark(#6b625c, #c2b3a7);
    --ui-accent-brand:              light-dark(#b63a2f, #ef8c68);
    --ui-accent-brand-contrast:     light-dark(#fff7ef, #2a1209);
    --ui-text-on-accent:            light-dark(#fff7ef, #2a1209);

    /* STATE — semantic feedback colors + focus ring */
    --ui-state-success:     light-dark(#2d5a4d, #84c3ad);
    --ui-state-warning:     light-dark(#c5803a, #e6ac6b);
    --ui-state-danger:      light-dark(#b14e49, #d85f57);
    --ui-state-info:        light-dark(#27566a, #7facc4);
    --ui-focus-ring:        light-dark(#b63a2f, #ef8c68);

    /* CHART — categorical 8-step palette */
    --ui-chart-1:     light-dark(#b63a2f, #ef8c68);
    --ui-chart-2:     light-dark(#7f271f, #f3ae84);
    --ui-chart-3:     light-dark(#2d5a4d, #84c3ad);
    --ui-chart-4:     light-dark(#27566a, #a7c7da);
    --ui-chart-5:     #db7d55;
    --ui-chart-6:     light-dark(#9e7a3a, #c0a060);
    --ui-chart-7:     light-dark(#3f7d8a, #67a8b9);
    --ui-chart-8:     light-dark(#666638, #959566);

    /* FORM — radius scale */
    --ui-radius-none:     0;
    --ui-radius-sm:       0.25rem;
    --ui-radius-md:       0.625rem;
    --ui-radius-lg:       1.375rem;
    --ui-radius-pill:     9999px;

    /* DEPTH — shadow scale */
    --ui-shadow-xs:        light-dark(0 1px 2px 0 rgba(64, 39, 21, 0.05), 0 1px 2px 0 rgba(2, 8, 15, 0.32));
    --ui-shadow-sm:        light-dark(0 2px 8px -2px rgba(64, 39, 21, 0.08), 0 2px 8px -2px rgba(2, 8, 15, 0.42));
    --ui-shadow-md:        light-dark(0 8px 18px -6px rgba(64, 39, 21, 0.12), 0 8px 18px -6px rgba(2, 8, 15, 0.52));
    --ui-shadow-lg:        light-dark(0 18px 36px -12px rgba(64, 39, 21, 0.18), 0 18px 36px -12px rgba(2, 8, 15, 0.62));
    --ui-shadow-color:     light-dark(rgba(64, 39, 21, 0.10), rgba(2, 8, 15, 0.45));

    /* MOTION — durations + easings */
    --ui-motion-duration-fast:         120ms;
    --ui-motion-duration-normal:       240ms;
    --ui-motion-duration-slow:         480ms;
    --ui-motion-easing-standard:       cubic-bezier(0.4, 0, 0.2, 1);
    --ui-motion-easing-emphasized:     cubic-bezier(0.3, 0, 0, 1);

    /* EFFECT — surface filters (glass) */
    --ui-surface-blur:           none;
    --ui-surface-saturation:     100%;
}

:root[data-skin-mode="light"] { color-scheme: light; }
:root[data-skin-mode="dark"]  { color-scheme: dark; }