/* Theme tokens for the marketing site. Scoped component CSS reads these variables. */
.mk-shell {
    --mk-bg: #0a0a0a;
    --mk-header-bg: rgba(10, 10, 10, .8);
    --mk-panel: #181818;
    --mk-panel-2: #212121;
    --mk-border: rgba(255, 255, 255, .12);
    --mk-text: #ededed;
    --mk-heading: #ffffff;
    --mk-muted: #a1a1a1;
    --mk-subtle: #6b6b6b;
    --mk-dot: rgba(255, 255, 255, .07);
    --mk-btn-bg: #ededed;
    --mk-btn-fg: #0a0a0a;
    --mk-btn-hover: #ffffff;
    --mk-accent: #3b82f6;
    --mk-accent-hover: #2563eb;
    --mk-accent-fg: #ffffff;
    --mk-ghost-bg: rgba(255, 255, 255, .06);
    --mk-ghost-hover-border: rgba(255, 255, 255, .24);
    --mk-tab-active: #222222;
    --mk-sweep-1: rgba(255, 255, 255, .16);
    --mk-sweep-2: rgba(255, 255, 255, .28);
    --mk-shadow: rgba(0, 0, 0, .8);
    /* App preview window */
    --w-chrome: #141414;
    --w-url-bg: #1f1f1f;
    --w-url-text: #7a7a7a;
    --w-bg: #1b1b1b;
    --w-panel: #232323;
    --w-border: #333333;
    --w-input-border: #444444;
    --w-input-bg: #1b1b1b;
    --w-text: #e6e6e6;
    --w-strong: #ffffff;
    --w-soft: #cfcfcf;
    --w-muted: #9a9a9a;
    --w-top: #2b2b2b;
    --w-active: #333333;
    --w-card: #262626;
    --w-count: #3a3a3a;
    --w-cell: rgba(255, 255, 255, .015);
    --w-code-bg: #1e1e1e;
    --w-code-text: #d4d4d4;
    --w-ln: #6e7681;
    --w-tag: #569cd6;
    --w-attr: #9cdcfe;
    --w-str: #ce9178;
    --w-comment: #6a9955;
    --w-op: #c586c0;
}

.mk-shell[data-theme="light"] {
    --mk-bg: #fafafa;
    --mk-header-bg: rgba(250, 250, 250, .85);
    --mk-panel: #ffffff;
    --mk-panel-2: #f4f4f5;
    --mk-border: rgba(0, 0, 0, .1);
    --mk-text: #27272a;
    --mk-heading: #09090b;
    --mk-muted: #52525b;
    --mk-subtle: #71717a;
    --mk-dot: rgba(0, 0, 0, .08);
    --mk-btn-bg: #18181b;
    --mk-btn-fg: #fafafa;
    --mk-btn-hover: #000000;
    --mk-accent: #2563eb;
    --mk-accent-hover: #1d4ed8;
    --mk-accent-fg: #ffffff;
    --mk-ghost-bg: rgba(0, 0, 0, .03);
    --mk-ghost-hover-border: rgba(0, 0, 0, .25);
    --mk-tab-active: #ffffff;
    --mk-sweep-1: rgba(0, 0, 0, .05);
    --mk-sweep-2: rgba(0, 0, 0, .1);
    --mk-shadow: rgba(0, 0, 0, .18);
    --w-chrome: #ececec;
    --w-url-bg: #ffffff;
    --w-url-text: #71717a;
    --w-bg: #ffffff;
    --w-panel: #f6f6f6;
    --w-border: #e2e2e2;
    --w-input-border: #cfcfcf;
    --w-input-bg: #ffffff;
    --w-text: #222222;
    --w-strong: #000000;
    --w-soft: #444444;
    --w-muted: #777777;
    --w-top: #f3f3f3;
    --w-active: #e8eefc;
    --w-card: #ffffff;
    --w-count: #e5e5e5;
    --w-cell: rgba(0, 0, 0, .02);
    --w-code-bg: #fffffe;
    --w-code-text: #333333;
    --w-ln: #999999;
    --w-tag: #800000;
    --w-attr: #e50000;
    --w-str: #0451a5;
    --w-comment: #008000;
    --w-op: #af00db;
}