/* Demo kit v1: the look that every demo on andrejorsula.github.io shares with
   the portfolio. The rules live at /demo-kit/v1/ (index.html beside this file).
   The values mirror sass/skins/pastel_ocean.scss and the tabi theme, and a
   unit test keeps them equal. v1 never changes incompatibly; a breaking change
   becomes /demo-kit/v2/. */

@font-face {
    font-family: 'Inter Demo';
    src: url('/fonts/Inter4.woff2') format('woff2');
    font-weight: 100 900;
    font-display: swap;
}

:root {
    color-scheme: light;
    --demo-bg: #ffffff;
    --demo-surface: #f0f0f0;
    --demo-surface-2: #e7e7e7;
    --demo-border: #d7d7d7;
    --demo-text: #222226;
    --demo-text-strong: #313333;
    --demo-muted: #5b5b65;
    --demo-accent: #5369c1;
    --demo-on-accent: #ffffff;
    --demo-font: 'Inter Demo', Inter, Helvetica, Arial, sans-serif;
    --demo-mono: 'Cascadia Code', ui-monospace, monospace;
    --demo-radius: 8px;
    --demo-radius-control: 6px;
}

:root[data-theme='dark'] {
    color-scheme: dark;
    --demo-bg: #1f1f1f;
    --demo-surface: #2f2f2f;
    --demo-surface-2: #3c3c3c;
    --demo-border: #4a4a4a;
    --demo-text: #d4d4d4;
    --demo-text-strong: #eceeef;
    --demo-muted: #b0b0b0;
    --demo-accent: #7c91d9;
    --demo-on-accent: #1f1f1f;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme='light']) {
        color-scheme: dark;
        --demo-bg: #1f1f1f;
        --demo-surface: #2f2f2f;
        --demo-surface-2: #3c3c3c;
        --demo-border: #4a4a4a;
        --demo-text: #d4d4d4;
        --demo-text-strong: #eceeef;
        --demo-muted: #b0b0b0;
        --demo-accent: #7c91d9;
        --demo-on-accent: #1f1f1f;
    }
}

/* Painted before any WebAssembly starts, so a dark page never flashes white. */
html {
    background: var(--demo-bg);
    color: var(--demo-text);
    font-family: var(--demo-font);
}

/* The link back to the portfolio shows only when the demo is the whole page. */
:root[data-embedded] .demo-home {
    display: none;
}

/* The scheme toggle, drawn as the portfolio's: a moon in light, a sun in dark.
   It shows only when the demo is the whole page, since an embedded demo
   follows its host, and only once theme.js runs. */
.demo-theme-toggle {
    --demo-theme-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M283.211 512c78.962 0 151.079-35.925 198.857-94.792 7.068-8.708-.639-21.43-11.562-19.35-124.203 23.654-238.262-71.576-238.262-196.954 0-72.222 38.662-138.635 101.498-174.394 9.686-5.512 7.25-20.197-3.756-22.23A258.156 258.156 0 0 0 283.211 0c-141.309 0-256 114.511-256 256 0 141.309 114.511 256 256 256z'/%3E%3C/svg%3E%0A");
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border: 0;
    border-radius: var(--demo-radius-control);
    background: transparent;
    cursor: pointer;
}

.demo-theme-toggle::before {
    content: '';
    width: 1rem;
    height: 1rem;
    background: var(--demo-text);
    -webkit-mask: var(--demo-theme-icon) center / contain no-repeat;
    mask: var(--demo-theme-icon) center / contain no-repeat;
}

.demo-theme-toggle:hover::before {
    background: var(--demo-muted);
}

.demo-theme-toggle:focus-visible {
    outline: 2px solid var(--demo-accent);
    outline-offset: 1px;
}

:root[data-theme='dark'] .demo-theme-toggle {
    --demo-theme-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 96 960 960' %3E%3Cpath d='M480 776q-83 0-141.5-58.5T280 576q0-83 58.5-141.5T480 376q83 0 141.5 58.5T680 576q0 83-58.5 141.5T480 776ZM80 616q-17 0-28.5-11.5T40 576q0-17 11.5-28.5T80 536h80q17 0 28.5 11.5T200 576q0 17-11.5 28.5T160 616H80Zm720 0q-17 0-28.5-11.5T760 576q0-17 11.5-28.5T800 536h80q17 0 28.5 11.5T920 576q0 17-11.5 28.5T880 616h-80ZM480 296q-17 0-28.5-11.5T440 256v-80q0-17 11.5-28.5T480 136q17 0 28.5 11.5T520 176v80q0 17-11.5 28.5T480 296Zm0 720q-17 0-28.5-11.5T440 976v-80q0-17 11.5-28.5T480 856q17 0 28.5 11.5T520 896v80q0 17-11.5 28.5T480 1016ZM226 378l-43-42q-12-11-11.5-28t11.5-29q12-12 29-12t28 12l42 43q11 12 11 28t-11 28q-11 12-27.5 11.5T226 378Zm494 495-42-43q-11-12-11-28.5t11-27.5q11-12 27.5-11.5T734 774l43 42q12 11 11.5 28T777 873q-12 12-29 12t-28-12Zm-42-495q-12-11-11.5-27.5T678 322l42-43q11-12 28-11.5t29 11.5q12 12 12 29t-12 28l-43 42q-12 11-28 11t-28-11ZM183 873q-12-12-12-29t12-28l43-42q12-11 28.5-11t27.5 11q12 11 11.5 27.5T282 830l-42 43q-11 12-28 11.5T183 873Z'/%3E%3C/svg%3E");
}

:root[data-embedded] .demo-theme-toggle,
:root:not([data-theme]) .demo-theme-toggle {
    display: none;
}