/* Skin: semitexa-os-site — OS marketing site (the "experience layer"). Coral accent, cream paper; dark flips to navy ink.
 * algorithm=manual  source=manual  seed=n/a  generated=2026-04-25T06:42:00+00:00.
 * Generated by semitexa/theme — do not edit manually.
 * Regenerate via `bin/semitexa skins:rebuild semitexa-os-site`.
 */
:root {
    color-scheme: light dark;

    /* COLOR — surfaces, borders, text, accent */
    --ui-surface-page:              light-dark(#f8efe6, #0e141a);
    --ui-surface-panel:             light-dark(#f1e3d1, #131c24);
    --ui-surface-raised:            light-dark(#fffaf6, #172029);
    --ui-surface-sunken:            light-dark(#ebdcc4, #0a1016);
    --ui-border-subtle:             light-dark(#e6d6bd, #22303d);
    --ui-border-strong:             light-dark(#c4ae8e, #394957);
    --ui-text-primary:              light-dark(#243542, #edf2f7);
    --ui-text-muted:                light-dark(#67615c, #b9b0aa);
    --ui-accent-brand:              light-dark(#ad532f, #f0a47d);
    --ui-accent-brand-contrast:     light-dark(#ffffff, #1a1208);
    --ui-text-on-accent:            light-dark(#ffffff, #1a1208);

    /* STATE — semantic feedback colors, text on them, focus ring */
    --ui-state-success:       light-dark(#448247, #4ea653);
    --ui-state-warning:       light-dark(#d19853, #e6ac6b);
    --ui-state-danger:        light-dark(#b14e49, #d85f57);
    --ui-state-info:          light-dark(#297cae, #3ba6df);
    --ui-text-on-success:     light-dark(#ffffff, #111111);
    --ui-text-on-warning:     #111111;
    --ui-text-on-danger:      light-dark(#ffffff, #111111);
    --ui-text-on-info:        light-dark(#ffffff, #111111);
    --ui-focus-ring:          light-dark(#c96d49, #f0a47d);

    /* CHART — categorical 8-step palette */
    --ui-chart-1:     light-dark(#c96d49, #f0a47d);
    --ui-chart-2:     light-dark(#d19853, #e6ac6b);
    --ui-chart-3:     light-dark(#5b8a51, #7eaf72);
    --ui-chart-4:     light-dark(#297cae, #3ba6df);
    --ui-chart-5:     light-dark(#7a4a8c, #a978b8);
    --ui-chart-6:     light-dark(#a05a3a, #c89a78);
    --ui-chart-7:     light-dark(#3f7d8a, #67a8b9);
    --ui-chart-8:     light-dark(#806a3a, #aa9966);

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

    /* DEPTH — shadow scale */
    --ui-shadow-xs:        0 1px 2px 0 light-dark(rgba(40, 60, 80, 0.05), rgba(0, 0, 0, 0.32));
    --ui-shadow-sm:        0 2px 8px -2px light-dark(rgba(40, 60, 80, 0.10), rgba(0, 0, 0, 0.44));
    --ui-shadow-md:        0 8px 18px -6px light-dark(rgba(40, 60, 80, 0.14), rgba(0, 0, 0, 0.55));
    --ui-shadow-lg:        0 18px 36px -12px light-dark(rgba(40, 60, 80, 0.20), rgba(0, 0, 0, 0.65));
    --ui-shadow-color:     light-dark(rgba(40, 60, 80, 0.10), rgba(0, 0, 0, 0.50));

    /* 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; }