/*
 * Gallery fixture: plausible values for every contract-v1 token, for testing the web kit
 * before dist/web/tokens.css exists. The gallery loads dist/web/tokens.css instead when it
 * is present. Not shipped to games; the generator owns the real values.
 */

:root {
  /* color */
  --sds-color-bg: #0b0c14;
  --sds-color-surface: #141624;
  --sds-color-surface-raised: #1d2033;
  --sds-color-overlay: #05060cc7;
  --sds-color-text: #eef0fa;
  --sds-color-text-muted: #a3a8c3;
  --sds-color-text-inverse: #0b0c14;
  --sds-color-accent: #7c8cff;
  --sds-color-accent-strong: #a3adff;
  --sds-color-on-accent: #0b0c14;
  --sds-color-success: #4ad6a0;
  --sds-color-warning: #f2c14e;
  --sds-color-danger: #ff6b7a;
  --sds-color-info: #5cc8ff;
  --sds-color-focus: #ffd166;
  --sds-color-line: #2a2e46;
  --sds-color-line-strong: #5f668f;
  --sds-color-disabled: #262939;
  --sds-color-on-disabled: #8a8fa8;

  /* font */
  --sds-font-display: "SDS Display", ui-rounded, "Avenir Next", system-ui, sans-serif;
  --sds-font-body: "SDS Body", system-ui, -apple-system, "Segoe UI", sans-serif;
  --sds-font-mono: "SDS Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* type */
  --sds-type-display-size: 48px;
  --sds-type-display-weight: 800;
  --sds-type-display-line-height: 1.05;
  --sds-type-display-tracking: -0.02em;
  --sds-type-title-size: 32px;
  --sds-type-title-weight: 700;
  --sds-type-title-line-height: 1.15;
  --sds-type-title-tracking: -0.01em;
  --sds-type-heading-size: 22px;
  --sds-type-heading-weight: 650;
  --sds-type-heading-line-height: 1.3;
  --sds-type-heading-tracking: 0em;
  --sds-type-body-size: 16px;
  --sds-type-body-weight: 400;
  --sds-type-body-line-height: 1.5;
  --sds-type-body-tracking: 0em;
  --sds-type-label-size: 15px;
  --sds-type-label-weight: 600;
  --sds-type-label-line-height: 1.2;
  --sds-type-label-tracking: 0.01em;
  --sds-type-caption-size: 13px;
  --sds-type-caption-weight: 500;
  --sds-type-caption-line-height: 1.4;
  --sds-type-caption-tracking: 0.02em;

  /* space */
  --sds-space-0: 0px;
  --sds-space-1: 2px;
  --sds-space-2: 4px;
  --sds-space-3: 8px;
  --sds-space-4: 12px;
  --sds-space-5: 16px;
  --sds-space-6: 24px;
  --sds-space-7: 32px;
  --sds-space-8: 48px;

  /* radius, border */
  --sds-radius-none: 0px;
  --sds-radius-sm: 6px;
  --sds-radius-md: 10px;
  --sds-radius-lg: 16px;
  --sds-radius-pill: 999px;
  --sds-border-thin: 1px;
  --sds-border-thick: 2px;

  /* elevation */
  --sds-shadow-sm: 0 1px 2px #00000066;
  --sds-shadow-md: 0 6px 16px #00000080;
  --sds-shadow-lg: 0 18px 48px #000000a6;
  --sds-glow-sm: 0 0 10px #7c8cff59;
  --sds-glow-md: 0 0 20px #7c8cff73;
  --sds-glow-lg: 0 0 40px #7c8cff8c;

  /* motion */
  --sds-motion-instant: 0ms;
  --sds-motion-fast: 120ms;
  --sds-motion-base: 220ms;
  --sds-motion-slow: 380ms;
  --sds-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --sds-ease-emphasis: cubic-bezier(0.34, 1.4, 0.64, 1);
  --sds-ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --sds-motion-reduce: 0;

  /* misc */
  --sds-opacity-disabled: 0.45;
  --sds-touch-target: 44px;
  --sds-focus-ring-width: 3px;
  --sds-focus-ring-offset: 2px;

  /* components */
  --sds-button-sm-height: 32px;
  --sds-button-sm-padding-x: 12px;
  --sds-button-sm-font-size: 14px;
  --sds-button-md-height: 44px;
  --sds-button-md-padding-x: 18px;
  --sds-button-md-font-size: 16px;
  --sds-button-lg-height: 56px;
  --sds-button-lg-padding-x: 26px;
  --sds-button-lg-font-size: 19px;
  --sds-button-radius: 10px;
  --sds-icon-button-sm-size: 32px;
  --sds-icon-button-md-size: 44px;
  --sds-icon-button-lg-size: 56px;
  --sds-toggle-width: 52px;
  --sds-toggle-height: 30px;
  --sds-slider-track: 6px;
  --sds-slider-thumb: 22px;
  --sds-dialog-width: 480px;
  --sds-dialog-padding: 24px;
  --sds-dialog-radius: 16px;
  --sds-panel-padding: 16px;
  --sds-panel-radius: 12px;
  --sds-toast-duration: 4000ms;

  color-scheme: dark;
}

/* studio-light: also the default when the OS asks for light and no theme is set. */
:root[data-sds-theme="studio-light"] {
  --sds-color-bg: #f5f6fa;
  --sds-color-surface: #ffffff;
  --sds-color-surface-raised: #ffffff;
  --sds-color-overlay: #1a1c2a8c;
  --sds-color-text: #14162a;
  --sds-color-text-muted: #545972;
  --sds-color-text-inverse: #f5f6fa;
  --sds-color-accent: #4353e0;
  --sds-color-accent-strong: #2f3cb8;
  --sds-color-on-accent: #ffffff;
  --sds-color-success: #13805a;
  --sds-color-warning: #9a6300;
  --sds-color-danger: #c42a3d;
  --sds-color-info: #1a6fb0;
  --sds-color-focus: #b85400;
  --sds-color-line: #dcdfea;
  --sds-color-line-strong: #7d829b;
  --sds-color-disabled: #e4e6ee;
  --sds-color-on-disabled: #676c84;
  --sds-shadow-sm: 0 1px 2px #14162a1f;
  --sds-shadow-md: 0 6px 18px #14162a24;
  --sds-shadow-lg: 0 20px 48px #14162a33;
  --sds-glow-sm: 0 0 10px #4353e033;
  --sds-glow-md: 0 0 20px #4353e040;
  --sds-glow-lg: 0 0 36px #4353e04d;
  color-scheme: light;
}

@media (prefers-color-scheme: light) {
  :root:not([data-sds-theme]) {
    --sds-color-bg: #f5f6fa;
    --sds-color-surface: #ffffff;
    --sds-color-surface-raised: #ffffff;
    --sds-color-overlay: #1a1c2a8c;
    --sds-color-text: #14162a;
    --sds-color-text-muted: #545972;
    --sds-color-text-inverse: #f5f6fa;
    --sds-color-accent: #4353e0;
    --sds-color-accent-strong: #2f3cb8;
    --sds-color-on-accent: #ffffff;
    --sds-color-success: #13805a;
    --sds-color-warning: #9a6300;
    --sds-color-danger: #c42a3d;
    --sds-color-info: #1a6fb0;
    --sds-color-focus: #b85400;
    --sds-color-line: #dcdfea;
    --sds-color-line-strong: #7d829b;
    --sds-color-disabled: #e4e6ee;
    --sds-color-on-disabled: #676c84;
    --sds-shadow-sm: 0 1px 2px #14162a1f;
    --sds-shadow-md: 0 6px 18px #14162a24;
    --sds-shadow-lg: 0 20px 48px #14162a33;
    --sds-glow-sm: 0 0 10px #4353e033;
    --sds-glow-md: 0 0 20px #4353e040;
    --sds-glow-lg: 0 0 36px #4353e04d;
    color-scheme: light;
  }
}

:root[data-sds-theme="dream-song"] {
  --sds-color-bg: #05040b;
  --sds-color-surface: #0e0b1d;
  --sds-color-surface-raised: #171230;
  --sds-color-overlay: #02010acc;
  --sds-color-text: #f4efff;
  --sds-color-text-muted: #b4a9da;
  --sds-color-text-inverse: #05040b;
  --sds-color-accent: #ff4fd8;
  --sds-color-accent-strong: #ff8ae7;
  --sds-color-on-accent: #05040b;
  --sds-color-success: #5bffb0;
  --sds-color-warning: #ffe066;
  --sds-color-danger: #ff5c7a;
  --sds-color-info: #3df5ff;
  --sds-color-focus: #3df5ff;
  --sds-color-line: #2a2150;
  --sds-color-line-strong: #6d5cad;
  --sds-color-disabled: #1f1938;
  --sds-color-on-disabled: #8b81ad;
  --sds-font-display: "Dream Song Display", ui-rounded, system-ui, sans-serif;
  --sds-radius-sm: 8px;
  --sds-radius-md: 14px;
  --sds-radius-lg: 22px;
  --sds-button-radius: 999px;
  --sds-panel-radius: 18px;
  --sds-dialog-radius: 22px;
  --sds-glow-sm: 0 0 12px #ff4fd880;
  --sds-glow-md: 0 0 24px #ff4fd899, 0 0 4px #ffffff66;
  --sds-glow-lg: 0 0 48px #ff4fd8b3, 0 0 12px #3df5ff66;
}

:root[data-sds-theme="smudges-escape"] {
  --sds-color-bg: #fbf6ea;
  --sds-color-surface: #fffdf6;
  --sds-color-surface-raised: #ffffff;
  --sds-color-overlay: #1d1a1680;
  --sds-color-text: #1d1a16;
  --sds-color-text-muted: #5b5348;
  --sds-color-text-inverse: #fbf6ea;
  --sds-color-accent: #b8321f;
  --sds-color-accent-strong: #8f2415;
  --sds-color-on-accent: #fffdf6;
  --sds-color-success: #2f7d32;
  --sds-color-warning: #8a5a00;
  --sds-color-danger: #b3261e;
  --sds-color-info: #1f5fa8;
  --sds-color-focus: #1f5fa8;
  --sds-color-line: #d9cfba;
  --sds-color-line-strong: #6f6454;
  --sds-color-disabled: #ebe4d3;
  --sds-color-on-disabled: #6e6658;
  --sds-font-display: "Smudge Marker", "Chalkboard SE", "Comic Sans MS", cursive;
  --sds-font-body: "Smudge Body", "Chalkboard SE", system-ui, sans-serif;
  --sds-radius-sm: 4px;
  --sds-radius-md: 8px;
  --sds-radius-lg: 14px;
  --sds-border-thick: 3px;
  --sds-touch-target: 64px;
  --sds-button-md-height: 56px;
  --sds-button-lg-height: 72px;
  --sds-button-lg-font-size: 22px;
  --sds-button-radius: 8px;
  --sds-icon-button-md-size: 56px;
  --sds-icon-button-lg-size: 72px;
  --sds-toggle-width: 64px;
  --sds-toggle-height: 36px;
  --sds-slider-track: 8px;
  --sds-slider-thumb: 30px;
  --sds-shadow-sm: 2px 2px 0 #1d1a16;
  --sds-shadow-md: 3px 4px 0 #1d1a16;
  --sds-shadow-lg: 5px 6px 0 #1d1a16;
  --sds-glow-sm: 0 0 0 3px #b8321f33;
  --sds-glow-md: 0 0 0 5px #b8321f33;
  --sds-glow-lg: 0 0 0 8px #b8321f33;
  --sds-motion-reduce: 1;
  color-scheme: light;
}

:root[data-sds-theme="rainbow-riders"] {
  --sds-color-bg: #f2f6ff;
  --sds-color-surface: #ffffff;
  --sds-color-surface-raised: #ffffff;
  --sds-color-overlay: #1b1440a6;
  --sds-color-text: #1b1440;
  --sds-color-text-muted: #4f4a73;
  --sds-color-text-inverse: #f2f6ff;
  --sds-color-accent: #6a2fd6;
  --sds-color-accent-strong: #5021ad;
  --sds-color-on-accent: #ffffff;
  --sds-color-success: #0f7d4f;
  --sds-color-warning: #a05a00;
  --sds-color-danger: #cc1f4a;
  --sds-color-info: #0a6cc2;
  --sds-color-focus: #e0559b;
  --sds-color-line: #d8dcf5;
  --sds-color-line-strong: #7c7aa8;
  --sds-color-disabled: #e5e7f5;
  --sds-color-on-disabled: #66658a;
  --sds-font-display: "Rainbow Display", ui-rounded, "Arial Rounded MT Bold", system-ui, sans-serif;
  --sds-radius-sm: 10px;
  --sds-radius-md: 18px;
  --sds-radius-lg: 28px;
  --sds-touch-target: 64px;
  --sds-button-md-height: 56px;
  --sds-button-lg-height: 72px;
  --sds-button-lg-font-size: 22px;
  --sds-button-radius: 999px;
  --sds-icon-button-md-size: 56px;
  --sds-icon-button-lg-size: 72px;
  --sds-toggle-width: 64px;
  --sds-toggle-height: 36px;
  --sds-slider-track: 10px;
  --sds-slider-thumb: 32px;
  --sds-panel-radius: 24px;
  --sds-dialog-radius: 32px;
  --sds-shadow-sm: 0 2px 4px #1b144026;
  --sds-shadow-md: 0 8px 20px #1b14402e;
  --sds-shadow-lg: 0 24px 56px #1b144040;
  --sds-glow-sm: 0 0 14px #6a2fd640;
  --sds-glow-md: 0 0 24px #6a2fd64d;
  --sds-glow-lg: 0 0 40px #e0559b59;
  --sds-motion-reduce: 1;
  color-scheme: light;
}

:root[data-sds-theme="trail"] {
  --sds-color-bg: #12100c;
  --sds-color-surface: #1c1914;
  --sds-color-surface-raised: #27231c;
  --sds-color-overlay: #0a0806cc;
  --sds-color-text: #efe6d4;
  --sds-color-text-muted: #b3a78f;
  --sds-color-text-inverse: #12100c;
  --sds-color-accent: #d9a441;
  --sds-color-accent-strong: #ebbe66;
  --sds-color-on-accent: #12100c;
  --sds-color-success: #8cc56b;
  --sds-color-warning: #e8b04a;
  --sds-color-danger: #e0684f;
  --sds-color-info: #7fb7d9;
  --sds-color-focus: #8fd3ff;
  --sds-color-line: #3a3428;
  --sds-color-line-strong: #7a6e58;
  --sds-color-disabled: #2a261f;
  --sds-color-on-disabled: #8f8572;
  --sds-font-display: "Trail Serif", "Iowan Old Style", Georgia, serif;
  --sds-radius-sm: 2px;
  --sds-radius-md: 4px;
  --sds-radius-lg: 6px;
  --sds-button-radius: 4px;
  --sds-panel-radius: 6px;
  --sds-dialog-radius: 6px;
  --sds-glow-sm: 0 0 8px #d9a44140;
  --sds-glow-md: 0 0 16px #d9a44152;
  --sds-glow-lg: 0 0 32px #d9a44166;
}

:root[data-sds-theme="nullbound"] {
  --sds-color-bg: #070a0f;
  --sds-color-surface: #0d131b;
  --sds-color-surface-raised: #142030;
  --sds-color-overlay: #03060ad1;
  --sds-color-text: #e6f3ff;
  --sds-color-text-muted: #93a9bf;
  --sds-color-text-inverse: #070a0f;
  --sds-color-accent: #39e1ff;
  --sds-color-accent-strong: #8aefff;
  --sds-color-on-accent: #04131a;
  --sds-color-success: #4dffa6;
  --sds-color-warning: #ffcc4d;
  --sds-color-danger: #ff5a6e;
  --sds-color-info: #39e1ff;
  --sds-color-focus: #ffb23d;
  --sds-color-line: #1f2e40;
  --sds-color-line-strong: #4f6b88;
  --sds-color-disabled: #18212d;
  --sds-color-on-disabled: #7b8da0;
  --sds-font-display: "Nullbound Display", "Eurostile", system-ui, sans-serif;
  --sds-radius-sm: 3px;
  --sds-radius-md: 6px;
  --sds-radius-lg: 10px;
  --sds-button-radius: 6px;
  --sds-panel-radius: 10px;
  --sds-dialog-radius: 12px;
  --sds-glow-sm: 0 0 10px #39e1ff59;
  --sds-glow-md: 0 0 22px #39e1ff73;
  --sds-glow-lg: 0 0 44px #39e1ff8c;
}

/* Reduced motion: every duration to 0ms (the OS query, then the explicit attribute). */
@media (prefers-reduced-motion: reduce) {
  :root,
  :root[data-sds-theme] {
    --sds-motion-fast: 0ms;
    --sds-motion-base: 0ms;
    --sds-motion-slow: 0ms;
  }
}

:root[data-sds-motion="reduce"] {
  --sds-motion-fast: 0ms;
  --sds-motion-base: 0ms;
  --sds-motion-slow: 0ms;
}