/* GENERATED by scripts/build.mjs from tokens/ and themes/. Do not edit. */

:root {
  --sxp-space-0: 0px;
  --sxp-space-1: 4px;
  --sxp-space-2: 8px;
  --sxp-space-3: 12px;
  --sxp-space-4: 16px;
  --sxp-space-5: 20px;
  --sxp-space-6: 24px;
  --sxp-space-8: 32px;
  --sxp-space-10: 40px;
  --sxp-space-12: 48px;
  --sxp-space-16: 64px;
  --sxp-target-min: 24px;
  --sxp-target-touch: 44px;
  --sxp-target-touch-primary: 48px;
  --sxp-control-height-sm: 28px;
  --sxp-control-height-md: 36px;
  --sxp-control-height-lg: 44px;
  --sxp-icon-sm: 16px;
  --sxp-icon-md: 20px;
  --sxp-icon-lg: 24px;
  --sxp-icon-xl: 32px;
  --sxp-icon-2xl: 48px;
  --sxp-radius-none: 0px;
  --sxp-radius-sm: 4px;
  --sxp-radius-md: 8px;
  --sxp-radius-lg: 12px;
  --sxp-radius-full: 9999px;
  --sxp-border-hairline: 1px;
  --sxp-border-strong: 2px;
  --sxp-focus-width: 2px;
  --sxp-focus-offset: 2px;
  --sxp-font-family-ui: "IBM Plex Sans Thai", "Noto Sans Thai", "Sarabun", system-ui, sans-serif;
  --sxp-font-family-display: "IBM Plex Sans Thai", "Noto Sans Thai", "Sarabun", system-ui, sans-serif;
  --sxp-font-family-mono: "IBM Plex Mono", ui-monospace, "Consolas", "Noto Sans Thai", monospace;
  --sxp-font-weight-regular: 400;
  --sxp-font-weight-medium: 500;
  --sxp-font-weight-strong: 600;
  --sxp-font-size-xs: 12px;
  --sxp-font-size-sm: 14px;
  --sxp-font-size-md: 16px;
  --sxp-font-size-lg: 18px;
  --sxp-font-size-xl: 22px;
  --sxp-font-size-2xl: 28px;
  --sxp-font-size-3xl: 36px;
  --sxp-font-leading-tight: 1.25;
  --sxp-font-leading-heading: 1.34;
  --sxp-font-leading-heading-th: 1.42;
  --sxp-font-leading-body: 1.55;
  --sxp-font-leading-body-th: 1.78;
  --sxp-font-label-case: none;
  --sxp-font-label-tracking: 0px;
  --sxp-motion-duration-instant: 0ms;
  --sxp-motion-duration-fast: 150ms;
  --sxp-motion-duration-base: 220ms;
  --sxp-motion-duration-slow: 400ms;
  --sxp-motion-duration-emphasis: 650ms;
  --sxp-motion-easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --sxp-motion-easing-emphasized: cubic-bezier(0.3, 0.7, 0.2, 1);
  --sxp-layer-base: 0;
  --sxp-layer-raised: 10;
  --sxp-layer-sticky: 100;
  --sxp-layer-overlay: 200;
  --sxp-layer-modal: 300;
  --sxp-layer-toast: 400;
  --sxp-elevation-0: none;
  --sxp-elevation-1: 0 1px 2px rgb(0 0 0 / 0.12);
  --sxp-elevation-2: 0 4px 16px rgb(0 0 0 / 0.18);
  --sxp-elevation-3: 0 12px 40px rgb(0 0 0 / 0.28);
  /* Adapter extras: interaction floor and device safe areas. */
  --sxp-target-floor: var(--sxp-target-min);
  --sxp-target-floor-primary: var(--sxp-target-min);
  --sxp-safe-top: env(safe-area-inset-top, 0px);
  --sxp-safe-right: env(safe-area-inset-right, 0px);
  --sxp-safe-bottom: env(safe-area-inset-bottom, 0px);
  --sxp-safe-left: env(safe-area-inset-left, 0px);
}

/* Coarse pointer (touch): every target grows to the touch floor. */
@media (pointer: coarse) {
  :root { --sxp-target-floor: var(--sxp-target-touch); --sxp-target-floor-primary: var(--sxp-target-touch-primary); }
}

/* SXP Destiny (candidate) — night (default) */
[data-sxp-theme="destiny"] {
  color-scheme: dark;
  --sxp-control-height-md: 48px;
  --sxp-control-height-lg: 52px;
  --sxp-radius-sm: 8px;
  --sxp-radius-md: 12px;
  --sxp-radius-lg: 16px;
  --sxp-motion-easing-standard: cubic-bezier(0.3, 0.7, 0.2, 1);
  --sxp-color-surface-canvas: #100d1c;
  --sxp-color-surface-base: #1b1630;
  --sxp-color-surface-raised: #262042;
  --sxp-color-surface-sunken: #0b0915;
  --sxp-color-surface-overlay: #0b0915cc;
  --sxp-color-content-primary: #f3eefb;
  --sxp-color-content-secondary: #bdb5d4;
  --sxp-color-content-tertiary: #aea6c8;
  --sxp-color-content-disabled: #7d7599;
  --sxp-color-content-on-accent: #1a1426;
  --sxp-color-border-subtle: #2a2448;
  --sxp-color-border-default: #3b3460;
  --sxp-color-border-strong: #8a80b3;
  --sxp-color-accent-default: #d9b56a;
  --sxp-color-accent-hover: #e6c98d;
  --sxp-color-accent-pressed: #c49f55;
  --sxp-color-accent-subtle: #d9b56a24;
  --sxp-color-accent-content: #e6c98d;
  --sxp-color-focus-ring: #b7a8ff;
  --sxp-color-selection-border: #d9b56a;
  --sxp-color-selection-surface: #d9b56a24;
  --sxp-color-tone-neutral-content: #bdb5d4;
  --sxp-color-tone-neutral-surface: #bdb5d41a;
  --sxp-color-tone-neutral-border: #bdb5d440;
  --sxp-color-tone-info-content: #7fd1c7;
  --sxp-color-tone-info-surface: #7fd1c71f;
  --sxp-color-tone-info-border: #7fd1c759;
  --sxp-color-tone-success-content: #8fd3ad;
  --sxp-color-tone-success-surface: #173024;
  --sxp-color-tone-success-border: #2f6b4b;
  --sxp-color-tone-warning-content: #f49725;
  --sxp-color-tone-warning-surface: #33250f;
  --sxp-color-tone-warning-border: #7a5a26;
  --sxp-color-tone-danger-content: #f0a792;
  --sxp-color-tone-danger-surface: #3a211b;
  --sxp-color-tone-danger-border: #7a4032;
  --sxp-color-tone-danger-solid: #b9483a;
  --sxp-color-tone-danger-on-solid: #ffffff;
  --sxp-color-tone-attention-content: #ffe08a;
  --sxp-color-tone-attention-surface: #332a10;
  --sxp-color-tone-attention-border: #8a7630;
}

/* The First Crossing — dark (default) */
[data-sxp-theme="first-crossing"] {
  color-scheme: dark;
  --sxp-control-height-sm: 36px;
  --sxp-control-height-md: 44px;
  --sxp-control-height-lg: 52px;
  --sxp-radius-sm: 4px;
  --sxp-radius-md: 8px;
  --sxp-radius-lg: 10px;
  --sxp-elevation-1: 0 1px 0 rgb(255 255 255 / 0.04), 0 2px 8px rgb(0 0 0 / 0.45);
  --sxp-elevation-2: 0 1px 0 rgb(255 255 255 / 0.05), 0 8px 24px rgb(0 0 0 / 0.55);
  --sxp-elevation-3: 0 1px 0 rgb(255 255 255 / 0.06), 0 16px 48px rgb(0 0 0 / 0.65);
  --sxp-font-family-ui: "Noto Sans", "Noto Sans Thai", system-ui, sans-serif;
  --sxp-font-family-display: "Noto Sans", "Noto Sans Thai", system-ui, sans-serif;
  --sxp-font-label-case: uppercase;
  --sxp-font-label-tracking: 1.5px;
  --sxp-motion-easing-standard: cubic-bezier(0.3, 0.7, 0.2, 1);
  --sxp-color-surface-canvas: #07080c;
  --sxp-color-surface-base: #0d0f17e6;
  --sxp-color-surface-raised: #161a24f2;
  --sxp-color-surface-sunken: #07080ce6;
  --sxp-color-surface-overlay: #000000b8;
  --sxp-color-content-primary: #edf2fa;
  --sxp-color-content-secondary: #9eabc2;
  --sxp-color-content-tertiary: #8e9ab0;
  --sxp-color-content-disabled: #6b7385;
  --sxp-color-content-on-accent: #140f0a;
  --sxp-color-border-subtle: #ffffff14;
  --sxp-color-border-default: #ffffff24;
  --sxp-color-border-strong: #8791a5;
  --sxp-color-accent-default: #db9433;
  --sxp-color-accent-hover: #f2a842;
  --sxp-color-accent-pressed: #c07f26;
  --sxp-color-accent-subtle: #db943329;
  --sxp-color-accent-content: #facc6b;
  --sxp-color-focus-ring: #9ebdfa;
  --sxp-color-selection-border: #facc6b;
  --sxp-color-selection-surface: #facc6b1f;
  --sxp-color-tone-neutral-content: #9eabc2;
  --sxp-color-tone-neutral-surface: #9eabc21a;
  --sxp-color-tone-neutral-border: #9eabc240;
  --sxp-color-tone-info-content: #9ebdfa;
  --sxp-color-tone-info-surface: #9ebdfa1f;
  --sxp-color-tone-info-border: #9ebdfa59;
  --sxp-color-tone-success-content: #8ce09e;
  --sxp-color-tone-success-surface: #8ce09e1f;
  --sxp-color-tone-success-border: #8ce09e59;
  --sxp-color-tone-warning-content: #ff9f4a;
  --sxp-color-tone-warning-surface: #ff9f4a1f;
  --sxp-color-tone-warning-border: #ff9f4a59;
  --sxp-color-tone-danger-content: #f27873;
  --sxp-color-tone-danger-surface: #f278731f;
  --sxp-color-tone-danger-border: #f2787359;
  --sxp-color-tone-danger-solid: #a8322b;
  --sxp-color-tone-danger-on-solid: #fff3f0;
  --sxp-color-tone-attention-content: #facc6b;
  --sxp-color-tone-attention-surface: #facc6b1f;
  --sxp-color-tone-attention-border: #facc6b66;
  --sxp-color-meter-track: #ffffff1a;
  --sxp-color-meter-health: #8ce09e;
  --sxp-color-meter-health-low: #f27873;
  --sxp-color-meter-resource: #7fb2ff;
  --sxp-color-meter-progress: #facc6b;
  --sxp-color-tone-urgent-content: #ff85c0;
  --sxp-color-tone-urgent-surface: #ff4f9a1f;
  --sxp-color-tone-urgent-border: #ff5fa866;
  --sxp-color-tone-urgent-solid: #e0467f;
  --sxp-color-tone-urgent-on-solid: #140f0a;
  --sxp-color-tone-reward-content: #facc6b;
  --sxp-color-tone-reward-surface: #facc6b1f;
  --sxp-color-tone-reward-border: #facc6b66;
  --sxp-color-tone-reward-solid: #facc6b;
  --sxp-color-tone-reward-on-solid: #140f0a;
  --sxp-color-tone-claimable-content: #f2a842;
  --sxp-color-tone-claimable-surface: #db943329;
  --sxp-color-tone-claimable-border: #f2a842;
  --sxp-color-tone-claimable-solid: #db9433;
  --sxp-color-tone-claimable-on-solid: #140f0a;
  --sxp-color-tone-quest-content: #9ebdfa;
  --sxp-color-tone-quest-surface: #9ebdfa1f;
  --sxp-color-tone-quest-border: #9ebdfa59;
  --sxp-color-tone-travel-content: #86d9c4;
  --sxp-color-tone-travel-surface: #86d9c41f;
  --sxp-color-tone-travel-border: #86d9c459;
  --sxp-color-tone-social-content: #d6adff;
  --sxp-color-tone-social-surface: #d6adff1f;
  --sxp-color-tone-social-border: #d6adff59;
}

/* ISEKAI CROSSING (candidate) — day (default) */
[data-sxp-theme="isekai-crossing"] {
  color-scheme: dark;
  --sxp-control-height-sm: 32px;
  --sxp-control-height-md: 40px;
  --sxp-control-height-lg: 48px;
  --sxp-radius-sm: 6px;
  --sxp-radius-md: 12px;
  --sxp-radius-lg: 18px;
  --sxp-font-family-ui: system-ui, "Segoe UI", "Roboto", "Noto Sans", "Noto Sans Thai", sans-serif;
  --sxp-font-family-display: system-ui, "Segoe UI", "Roboto", "Noto Sans", "Noto Sans Thai", sans-serif;
  --sxp-color-surface-canvas: #1d2a22;
  --sxp-color-surface-base: #121a21b8;
  --sxp-color-surface-raised: #1c1822c7;
  --sxp-color-surface-sunken: #0c1116e0;
  --sxp-color-surface-overlay: #0c1116b3;
  --sxp-color-content-primary: #f7f3ea;
  --sxp-color-content-secondary: #f7f3eab8;
  --sxp-color-content-tertiary: #c9c3b6;
  --sxp-color-content-disabled: #8f8a80;
  --sxp-color-content-on-accent: #2a1f05;
  --sxp-color-border-subtle: #ffffff14;
  --sxp-color-border-default: #ffffff24;
  --sxp-color-border-strong: #b8b2a6;
  --sxp-color-accent-default: #ffd166;
  --sxp-color-accent-hover: #ffdc8a;
  --sxp-color-accent-pressed: #f0bf4c;
  --sxp-color-accent-subtle: #ffd16629;
  --sxp-color-accent-content: #ffd166;
  --sxp-color-focus-ring: #7cc6ff;
  --sxp-color-selection-border: #ffd166;
  --sxp-color-selection-surface: #ffd16629;
  --sxp-color-tone-neutral-content: #c9c3b6;
  --sxp-color-tone-neutral-surface: #f7f3ea1a;
  --sxp-color-tone-neutral-border: #f7f3ea40;
  --sxp-color-tone-info-content: #7cc6ff;
  --sxp-color-tone-info-surface: #7cc6ff24;
  --sxp-color-tone-info-border: #7cc6ff66;
  --sxp-color-tone-success-content: #6fdc8c;
  --sxp-color-tone-success-surface: #6fdc8c24;
  --sxp-color-tone-success-border: #6fdc8c66;
  --sxp-color-tone-warning-content: #ff9a3d;
  --sxp-color-tone-warning-surface: #ff9a3d24;
  --sxp-color-tone-warning-border: #ff9a3d66;
  --sxp-color-tone-danger-content: #ff7a6b;
  --sxp-color-tone-danger-surface: #ff7a6b24;
  --sxp-color-tone-danger-border: #ff7a6b66;
  --sxp-color-tone-danger-solid: #c8402f;
  --sxp-color-tone-danger-on-solid: #ffffff;
  --sxp-color-tone-attention-content: #ffd166;
  --sxp-color-tone-attention-surface: #ffd16629;
  --sxp-color-tone-attention-border: #ffd16666;
  --sxp-color-meter-track: #0000004d;
  --sxp-color-meter-health: #6fdc8c;
  --sxp-color-meter-health-low: #ff7a6b;
  --sxp-color-meter-resource: #7cc6ff;
  --sxp-color-meter-progress: #ffd166;
  --sxp-color-tone-urgent-content: #e0d6ff;
  --sxp-color-tone-urgent-surface: #9b86ff1f;
  --sxp-color-tone-urgent-border: #c9b8ff80;
  --sxp-color-tone-urgent-solid: #c9b8ff;
  --sxp-color-tone-urgent-on-solid: #1d1440;
  --sxp-color-tone-reward-content: #ffdf9e;
  --sxp-color-tone-reward-surface: #ffd16614;
  --sxp-color-tone-reward-border: #ffd16666;
  --sxp-color-tone-reward-solid: #ffd166;
  --sxp-color-tone-reward-on-solid: #2a1f05;
  --sxp-color-tone-claimable-content: #ffe6ad;
  --sxp-color-tone-claimable-surface: #ffd16619;
  --sxp-color-tone-claimable-border: #ffd166;
  --sxp-color-tone-claimable-solid: #ffd166;
  --sxp-color-tone-claimable-on-solid: #2a1f05;
  --sxp-color-tone-quest-content: #c6e6ff;
  --sxp-color-tone-quest-surface: #7cc6ff17;
  --sxp-color-tone-quest-border: #7cc6ff66;
  --sxp-color-tone-travel-content: #b3f0e6;
  --sxp-color-tone-travel-surface: #7fd1c71a;
  --sxp-color-tone-travel-border: #7fd1c766;
  --sxp-color-tone-social-content: #ffd3f1;
  --sxp-color-tone-social-surface: #f59ee017;
  --sxp-color-tone-social-border: #f59ee066;
}

/* METAMI — light (default) */
[data-sxp-theme="metami"] {
  color-scheme: light;
  --sxp-radius-sm: 8px;
  --sxp-radius-md: 14px;
  --sxp-radius-lg: 20px;
  --sxp-control-height-md: 44px;
  --sxp-control-height-lg: 52px;
  --sxp-elevation-1: 0 1px 2px rgb(37 43 43 / 0.06);
  --sxp-elevation-2: 0 5px 18px rgb(37 43 43 / 0.06);
  --sxp-elevation-3: 0 14px 38px rgb(37 43 43 / 0.10);
  --sxp-font-family-ui: "IBM Plex Sans Thai Looped", "IBM Plex Sans Thai", "Noto Sans Thai Looped", "Noto Sans Thai", "Sarabun", system-ui, sans-serif;
  --sxp-color-surface-canvas: #f6f5f1;
  --sxp-color-surface-base: #fffdf9;
  --sxp-color-surface-raised: #ffffff;
  --sxp-color-surface-sunken: #eef3f0;
  --sxp-color-surface-overlay: #1b222299;
  --sxp-color-content-primary: #252b2b;
  --sxp-color-content-secondary: #4e5d5b;
  --sxp-color-content-tertiary: #3f4b49;
  --sxp-color-content-disabled: #687572;
  --sxp-color-content-on-accent: #ffffff;
  --sxp-color-border-subtle: #eef3f0;
  --sxp-color-border-default: #d9e1de;
  --sxp-color-border-strong: #687572;
  --sxp-color-accent-default: #1f625f;
  --sxp-color-accent-hover: #174d4b;
  --sxp-color-accent-pressed: #123d3b;
  --sxp-color-accent-subtle: #e6f0ee;
  --sxp-color-accent-content: #1f625f;
  --sxp-color-focus-ring: #b94d38;
  --sxp-color-selection-border: #1f625f;
  --sxp-color-selection-surface: #e6f0ee;
  --sxp-color-tone-neutral-content: #4e5d5b;
  --sxp-color-tone-neutral-surface: #eef3f0;
  --sxp-color-tone-neutral-border: #d9e1de;
  --sxp-color-tone-info-content: #174d4b;
  --sxp-color-tone-info-surface: #e6f0ee;
  --sxp-color-tone-info-border: #a8cdc7;
  --sxp-color-tone-success-content: #2d6a45;
  --sxp-color-tone-success-surface: #e8f3ec;
  --sxp-color-tone-success-border: #a9cfb5;
  --sxp-color-tone-warning-content: #a04a10;
  --sxp-color-tone-warning-surface: #fbece8;
  --sxp-color-tone-warning-border: #efb9ac;
  --sxp-color-tone-danger-content: #a01b33;
  --sxp-color-tone-danger-surface: #fcebea;
  --sxp-color-tone-danger-border: #f0b9b4;
  --sxp-color-tone-danger-solid: #b3261e;
  --sxp-color-tone-danger-on-solid: #ffffff;
  --sxp-color-tone-attention-content: #6e4f05;
  --sxp-color-tone-attention-surface: #fbf2dd;
  --sxp-color-tone-attention-border: #e3bf62;
}

/* METAMI — dark */
[data-sxp-theme="metami"][data-sxp-mode="dark"] {
  color-scheme: dark;
  --sxp-color-surface-canvas: #171a1b;
  --sxp-color-surface-base: #1f2425;
  --sxp-color-surface-raised: #272d2e;
  --sxp-color-surface-sunken: #1b1f20;
  --sxp-color-surface-overlay: #000000b3;
  --sxp-color-content-primary: #f2f0ea;
  --sxp-color-content-secondary: #d4d8d4;
  --sxp-color-content-tertiary: #adb8b4;
  --sxp-color-content-disabled: #7d8a88;
  --sxp-color-content-on-accent: #0b1f1e;
  --sxp-color-border-subtle: #343d3e;
  --sxp-color-border-default: #3d4747;
  --sxp-color-border-strong: #7d8a88;
  --sxp-color-accent-default: #70b9af;
  --sxp-color-accent-hover: #8ccbc2;
  --sxp-color-accent-pressed: #5aa79d;
  --sxp-color-accent-subtle: #1d3331;
  --sxp-color-accent-content: #70b9af;
  --sxp-color-focus-ring: #f0b45c;
  --sxp-color-selection-border: #70b9af;
  --sxp-color-selection-surface: #1d3331;
  --sxp-color-tone-neutral-content: #adb8b4;
  --sxp-color-tone-neutral-surface: #222829;
  --sxp-color-tone-neutral-border: #3d4747;
  --sxp-color-tone-info-content: #70b9af;
  --sxp-color-tone-info-surface: #1d3331;
  --sxp-color-tone-info-border: #2f5653;
  --sxp-color-tone-success-content: #8fc7a0;
  --sxp-color-tone-success-surface: #18291f;
  --sxp-color-tone-success-border: #33573f;
  --sxp-color-tone-warning-content: #f0a060;
  --sxp-color-tone-warning-surface: #2e1915;
  --sxp-color-tone-warning-border: #6e3a2f;
  --sxp-color-tone-danger-content: #ff8fa3;
  --sxp-color-tone-danger-surface: #2e1514;
  --sxp-color-tone-danger-border: #73302a;
  --sxp-color-tone-danger-solid: #c0392f;
  --sxp-color-tone-danger-on-solid: #ffffff;
  --sxp-color-tone-attention-content: #e9d35c;
  --sxp-color-tone-attention-surface: #2b230c;
  --sxp-color-tone-attention-border: #7a6326;
}
@media (prefers-color-scheme: dark) {
  [data-sxp-theme="metami"][data-sxp-mode="auto"] {
    color-scheme: dark;
    --sxp-color-surface-canvas: #171a1b;
    --sxp-color-surface-base: #1f2425;
    --sxp-color-surface-raised: #272d2e;
    --sxp-color-surface-sunken: #1b1f20;
    --sxp-color-surface-overlay: #000000b3;
    --sxp-color-content-primary: #f2f0ea;
    --sxp-color-content-secondary: #d4d8d4;
    --sxp-color-content-tertiary: #adb8b4;
    --sxp-color-content-disabled: #7d8a88;
    --sxp-color-content-on-accent: #0b1f1e;
    --sxp-color-border-subtle: #343d3e;
    --sxp-color-border-default: #3d4747;
    --sxp-color-border-strong: #7d8a88;
    --sxp-color-accent-default: #70b9af;
    --sxp-color-accent-hover: #8ccbc2;
    --sxp-color-accent-pressed: #5aa79d;
    --sxp-color-accent-subtle: #1d3331;
    --sxp-color-accent-content: #70b9af;
    --sxp-color-focus-ring: #f0b45c;
    --sxp-color-selection-border: #70b9af;
    --sxp-color-selection-surface: #1d3331;
    --sxp-color-tone-neutral-content: #adb8b4;
    --sxp-color-tone-neutral-surface: #222829;
    --sxp-color-tone-neutral-border: #3d4747;
    --sxp-color-tone-info-content: #70b9af;
    --sxp-color-tone-info-surface: #1d3331;
    --sxp-color-tone-info-border: #2f5653;
    --sxp-color-tone-success-content: #8fc7a0;
    --sxp-color-tone-success-surface: #18291f;
    --sxp-color-tone-success-border: #33573f;
    --sxp-color-tone-warning-content: #f0a060;
    --sxp-color-tone-warning-surface: #2e1915;
    --sxp-color-tone-warning-border: #6e3a2f;
    --sxp-color-tone-danger-content: #ff8fa3;
    --sxp-color-tone-danger-surface: #2e1514;
    --sxp-color-tone-danger-border: #73302a;
    --sxp-color-tone-danger-solid: #c0392f;
    --sxp-color-tone-danger-on-solid: #ffffff;
    --sxp-color-tone-attention-content: #e9d35c;
    --sxp-color-tone-attention-surface: #2b230c;
    --sxp-color-tone-attention-border: #7a6326;
  }
}

/* SXP AI Studio OS — light (default) */
[data-sxp-theme="studio-os"] {
  color-scheme: light;
  --sxp-control-height-sm: 24px;
  --sxp-control-height-md: 32px;
  --sxp-control-height-lg: 40px;
  --sxp-radius-sm: 3px;
  --sxp-radius-md: 6px;
  --sxp-radius-lg: 8px;
  --sxp-elevation-1: 0 1px 2px rgb(17 24 39 / 0.08);
  --sxp-elevation-2: 0 4px 12px rgb(17 24 39 / 0.12);
  --sxp-elevation-3: 0 12px 32px rgb(17 24 39 / 0.20);
  --sxp-motion-duration-base: 160ms;
  --sxp-motion-duration-slow: 240ms;
  --sxp-font-family-mono: "IBM Plex Mono", ui-monospace, "Consolas", "Noto Sans Thai", monospace;
  --sxp-color-surface-canvas: #f1f3f6;
  --sxp-color-surface-base: #ffffff;
  --sxp-color-surface-raised: #ffffff;
  --sxp-color-surface-sunken: #f7f8fa;
  --sxp-color-surface-overlay: #0f172a99;
  --sxp-color-content-primary: #111827;
  --sxp-color-content-secondary: #374151;
  --sxp-color-content-tertiary: #4b5563;
  --sxp-color-content-disabled: #6b7686;
  --sxp-color-content-on-accent: #ffffff;
  --sxp-color-border-subtle: #e5e8ee;
  --sxp-color-border-default: #d1d6de;
  --sxp-color-border-strong: #6b7686;
  --sxp-color-accent-default: #1f6fc5;
  --sxp-color-accent-hover: #195da8;
  --sxp-color-accent-pressed: #144c8a;
  --sxp-color-accent-subtle: #e7f0fb;
  --sxp-color-accent-content: #195da8;
  --sxp-color-focus-ring: #1f6fc5;
  --sxp-color-selection-border: #1f6fc5;
  --sxp-color-selection-surface: #e7f0fb;
  --sxp-color-tone-neutral-content: #4b5563;
  --sxp-color-tone-neutral-surface: #f1f3f6;
  --sxp-color-tone-neutral-border: #b3bcc9;
  --sxp-color-tone-info-content: #195da8;
  --sxp-color-tone-info-surface: #e7f0fb;
  --sxp-color-tone-info-border: #a9c8ee;
  --sxp-color-tone-success-content: #1b7a3d;
  --sxp-color-tone-success-surface: #e8f5ec;
  --sxp-color-tone-success-border: #a7d8b7;
  --sxp-color-tone-warning-content: #a35200;
  --sxp-color-tone-warning-surface: #fdefe6;
  --sxp-color-tone-warning-border: #f2b48c;
  --sxp-color-tone-danger-content: #b42318;
  --sxp-color-tone-danger-surface: #fdecea;
  --sxp-color-tone-danger-border: #f2b8b2;
  --sxp-color-tone-danger-solid: #c62a1e;
  --sxp-color-tone-danger-on-solid: #ffffff;
  --sxp-color-tone-attention-content: #6b5200;
  --sxp-color-tone-attention-surface: #fff4cc;
  --sxp-color-tone-attention-border: #e8c24a;
}

/* SXP AI Studio OS — dark */
[data-sxp-theme="studio-os"][data-sxp-mode="dark"] {
  color-scheme: dark;
  --sxp-color-surface-canvas: #0b0f17;
  --sxp-color-surface-base: #121824;
  --sxp-color-surface-raised: #1a2231;
  --sxp-color-surface-sunken: #0e131c;
  --sxp-color-surface-overlay: #000000b3;
  --sxp-color-content-primary: #e8edf4;
  --sxp-color-content-secondary: #b9c3d1;
  --sxp-color-content-tertiary: #9aa6b7;
  --sxp-color-content-disabled: #6b7686;
  --sxp-color-content-on-accent: #06121f;
  --sxp-color-border-subtle: #1c2433;
  --sxp-color-border-default: #2a3446;
  --sxp-color-border-strong: #6b7686;
  --sxp-color-accent-default: #4c9be8;
  --sxp-color-accent-hover: #5aa3ec;
  --sxp-color-accent-pressed: #3b87d2;
  --sxp-color-accent-subtle: #15263a;
  --sxp-color-accent-content: #7db8f2;
  --sxp-color-focus-ring: #7db8f2;
  --sxp-color-selection-border: #4c9be8;
  --sxp-color-selection-surface: #15263a;
  --sxp-color-tone-neutral-content: #9aa6b7;
  --sxp-color-tone-neutral-surface: #1b2230;
  --sxp-color-tone-neutral-border: #3a4556;
  --sxp-color-tone-info-content: #7db8f2;
  --sxp-color-tone-info-surface: #15263a;
  --sxp-color-tone-info-border: #2d5a8a;
  --sxp-color-tone-success-content: #6fd08f;
  --sxp-color-tone-success-surface: #102a1a;
  --sxp-color-tone-success-border: #2f6e45;
  --sxp-color-tone-warning-content: #ff9a5c;
  --sxp-color-tone-warning-surface: #2e1a0f;
  --sxp-color-tone-warning-border: #7a3f1c;
  --sxp-color-tone-danger-content: #ff8a80;
  --sxp-color-tone-danger-surface: #2e1413;
  --sxp-color-tone-danger-border: #7a2f2a;
  --sxp-color-tone-danger-solid: #c9372c;
  --sxp-color-tone-danger-on-solid: #ffffff;
  --sxp-color-tone-attention-content: #f7d046;
  --sxp-color-tone-attention-surface: #2b2408;
  --sxp-color-tone-attention-border: #8a7317;
}
@media (prefers-color-scheme: dark) {
  [data-sxp-theme="studio-os"][data-sxp-mode="auto"] {
    color-scheme: dark;
    --sxp-color-surface-canvas: #0b0f17;
    --sxp-color-surface-base: #121824;
    --sxp-color-surface-raised: #1a2231;
    --sxp-color-surface-sunken: #0e131c;
    --sxp-color-surface-overlay: #000000b3;
    --sxp-color-content-primary: #e8edf4;
    --sxp-color-content-secondary: #b9c3d1;
    --sxp-color-content-tertiary: #9aa6b7;
    --sxp-color-content-disabled: #6b7686;
    --sxp-color-content-on-accent: #06121f;
    --sxp-color-border-subtle: #1c2433;
    --sxp-color-border-default: #2a3446;
    --sxp-color-border-strong: #6b7686;
    --sxp-color-accent-default: #4c9be8;
    --sxp-color-accent-hover: #5aa3ec;
    --sxp-color-accent-pressed: #3b87d2;
    --sxp-color-accent-subtle: #15263a;
    --sxp-color-accent-content: #7db8f2;
    --sxp-color-focus-ring: #7db8f2;
    --sxp-color-selection-border: #4c9be8;
    --sxp-color-selection-surface: #15263a;
    --sxp-color-tone-neutral-content: #9aa6b7;
    --sxp-color-tone-neutral-surface: #1b2230;
    --sxp-color-tone-neutral-border: #3a4556;
    --sxp-color-tone-info-content: #7db8f2;
    --sxp-color-tone-info-surface: #15263a;
    --sxp-color-tone-info-border: #2d5a8a;
    --sxp-color-tone-success-content: #6fd08f;
    --sxp-color-tone-success-surface: #102a1a;
    --sxp-color-tone-success-border: #2f6e45;
    --sxp-color-tone-warning-content: #ff9a5c;
    --sxp-color-tone-warning-surface: #2e1a0f;
    --sxp-color-tone-warning-border: #7a3f1c;
    --sxp-color-tone-danger-content: #ff8a80;
    --sxp-color-tone-danger-surface: #2e1413;
    --sxp-color-tone-danger-border: #7a2f2a;
    --sxp-color-tone-danger-solid: #c9372c;
    --sxp-color-tone-danger-on-solid: #ffffff;
    --sxp-color-tone-attention-content: #f7d046;
    --sxp-color-tone-attention-surface: #2b2408;
    --sxp-color-tone-attention-border: #8a7317;
  }
}

/* Reduced motion wins over every theme: durations collapse to 0. */
@media (prefers-reduced-motion: reduce) {
  :root, [data-sxp-theme] {
    --sxp-motion-duration-instant: 0ms;
    --sxp-motion-duration-fast: 0ms;
    --sxp-motion-duration-base: 0ms;
    --sxp-motion-duration-slow: 0ms;
    --sxp-motion-duration-emphasis: 0ms;
  }
}