/* Generated by scripts/build-tokens.mjs. Edit tokens/design-tokens.json. */

.yds-root {
  --yds-font: Inter, Pretendard, 'Noto Sans KR', 'Segoe UI', system-ui, sans-serif;
  --yds-font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
  --yds-text-xs: 11px;
  --yds-text-sm: 12px;
  --yds-text-md: 14px;
  --yds-text-lg: 16px;
  --yds-text-xl: 20px;
  --yds-text-2xl: 24px;
  --yds-text-display: 36px;
  --yds-weight-regular: 400;
  --yds-weight-medium: 500;
  --yds-weight-semibold: 600;
  --yds-leading-tight: 1.25;
  --yds-leading-normal: 1.55;
  --yds-leading-relaxed: 1.7;
  --yds-space-0: 0px;
  --yds-space-1: 4px;
  --yds-space-2: 8px;
  --yds-space-3: 12px;
  --yds-space-4: 16px;
  --yds-space-5: 20px;
  --yds-space-6: 24px;
  --yds-space-7: 28px;
  --yds-space-8: 32px;
  --yds-space-9: 36px;
  --yds-space-10: 40px;
  --yds-space-11: 44px;
  --yds-space-12: 48px;
  --yds-radius-sm: 4px;
  --yds-radius-control: 7px;
  --yds-radius-panel: 10px;
  --yds-radius-lg: 12px;
  --yds-radius-full: 9999px;
  --yds-border-width: 1px;
  --yds-focus-width: 2px;
  --yds-focus-offset: 3px;
  --yds-z-base: 0;
  --yds-z-sticky: 10;
  --yds-z-popover: 30;
  --yds-z-overlay: 40;
  --yds-z-toast: 60;
  --yds-motion-fast: 120ms;
  --yds-motion-normal: 180ms;
  --yds-motion-slow: 300ms;
  --yds-ease: cubic-bezier(.2, 0, 0, 1);
  --yds-control-height-sm: 28px;
  --yds-control-height: 36px;
  --yds-control-height-lg: 42px;
  --yds-row-pad: 12px;
  --yds-panel-pad: 20px;
}

.yds-root {
  --yds-brand-primary-light: #1c7b61;
  --yds-brand-primary-hover-light: #196e57;
  --yds-brand-on-primary-light: #ffffff;
  --yds-brand-primary-soft-light: #e9f5ef;
  --yds-brand-primary-border-light: #a8d6c3;
  --yds-brand-primary-dark: #70d0ae;
  --yds-brand-primary-hover-dark: #8edcbd;
  --yds-brand-on-primary-dark: #102d23;
  --yds-brand-primary-soft-dark: #203b30;
  --yds-brand-primary-border-dark: #3c6c58;
}

.yds-root[data-brand="presetmeter"] {
  --yds-brand-primary-light: #1c7b61;
  --yds-brand-primary-hover-light: #196e57;
  --yds-brand-on-primary-light: #ffffff;
  --yds-brand-primary-soft-light: #e9f5ef;
  --yds-brand-primary-border-light: #a8d6c3;
  --yds-brand-primary-dark: #70d0ae;
  --yds-brand-primary-hover-dark: #8edcbd;
  --yds-brand-on-primary-dark: #102d23;
  --yds-brand-primary-soft-dark: #203b30;
  --yds-brand-primary-border-dark: #3c6c58;
}

.yds-root[data-brand="yardstomp"] {
  --yds-brand-primary-light: #ac551f;
  --yds-brand-primary-hover-light: #9f4e1c;
  --yds-brand-on-primary-light: #ffffff;
  --yds-brand-primary-soft-light: #fcf0e7;
  --yds-brand-primary-border-light: #ebc4a6;
  --yds-brand-primary-dark: #f0b07a;
  --yds-brand-primary-hover-dark: #f7c69d;
  --yds-brand-on-primary-dark: #38210d;
  --yds-brand-primary-soft-dark: #3a2b20;
  --yds-brand-primary-border-dark: #775332;
}

.yds-root {
  --yds-bg: #f8f9fa;
  --yds-panel: #ffffff;
  --yds-surface: #f1f4f4;
  --yds-surface-hover: #e9eeee;
  --yds-fg: #1c2024;
  --yds-muted: #626b74;
  --yds-border: #dfe4e6;
  --yds-border-strong: #87929c;
  --yds-disabled: #737d86;
  --yds-primary: var(--yds-brand-primary-light);
  --yds-primary-hover: var(--yds-brand-primary-hover-light);
  --yds-on-primary: var(--yds-brand-on-primary-light);
  --yds-primary-soft: var(--yds-brand-primary-soft-light);
  --yds-primary-border: var(--yds-brand-primary-border-light);
  --yds-focus: #2868bb;
  --yds-success: #18734e;
  --yds-success-soft: #eaf6ef;
  --yds-success-border: #a6d4bb;
  --yds-warning: #865d15;
  --yds-warning-soft: #fff5dc;
  --yds-warning-border: #e6cd91;
  --yds-danger: #ba3434;
  --yds-danger-hover: #a32d2d;
  --yds-on-danger: #ffffff;
  --yds-danger-soft: #fff0ef;
  --yds-danger-border: #efb9b5;
  --yds-info: #2865ab;
  --yds-info-soft: #edf5ff;
  --yds-info-border: #b5d0ee;
  --yds-overlay: #11182066;
  --yds-shadow-sm: 0 1px 2px #1c20240a;
  --yds-shadow-md: 0 4px 14px #1c20240f, 0 1px 3px #1c20240a;
  --yds-shadow-lg: 0 18px 60px #17212d26;
  --yds-canvas-bg: #eeebe4;
  --yds-canvas-grid: #c8c2b5;
  --yds-canvas-label: #5f666b;
  --yds-canvas-board: #262d31;
  --yds-canvas-board-edge: #14191c;
  --yds-canvas-selection: #d0632a;
  --yds-canvas-plug: #e2a849;
  --yds-canvas-collision: #e0544e;
  --yds-canvas-clear: #3f9f7e;
  --yds-canvas-cable: #3ba3d9;
  color-scheme: light;
}

.yds-root[data-theme="light"] {
  --yds-bg: #f8f9fa;
  --yds-panel: #ffffff;
  --yds-surface: #f1f4f4;
  --yds-surface-hover: #e9eeee;
  --yds-fg: #1c2024;
  --yds-muted: #626b74;
  --yds-border: #dfe4e6;
  --yds-border-strong: #87929c;
  --yds-disabled: #737d86;
  --yds-primary: var(--yds-brand-primary-light);
  --yds-primary-hover: var(--yds-brand-primary-hover-light);
  --yds-on-primary: var(--yds-brand-on-primary-light);
  --yds-primary-soft: var(--yds-brand-primary-soft-light);
  --yds-primary-border: var(--yds-brand-primary-border-light);
  --yds-focus: #2868bb;
  --yds-success: #18734e;
  --yds-success-soft: #eaf6ef;
  --yds-success-border: #a6d4bb;
  --yds-warning: #865d15;
  --yds-warning-soft: #fff5dc;
  --yds-warning-border: #e6cd91;
  --yds-danger: #ba3434;
  --yds-danger-hover: #a32d2d;
  --yds-on-danger: #ffffff;
  --yds-danger-soft: #fff0ef;
  --yds-danger-border: #efb9b5;
  --yds-info: #2865ab;
  --yds-info-soft: #edf5ff;
  --yds-info-border: #b5d0ee;
  --yds-overlay: #11182066;
  --yds-shadow-sm: 0 1px 2px #1c20240a;
  --yds-shadow-md: 0 4px 14px #1c20240f, 0 1px 3px #1c20240a;
  --yds-shadow-lg: 0 18px 60px #17212d26;
  --yds-canvas-bg: #eeebe4;
  --yds-canvas-grid: #c8c2b5;
  --yds-canvas-label: #5f666b;
  --yds-canvas-board: #262d31;
  --yds-canvas-board-edge: #14191c;
  --yds-canvas-selection: #d0632a;
  --yds-canvas-plug: #e2a849;
  --yds-canvas-collision: #e0544e;
  --yds-canvas-clear: #3f9f7e;
  --yds-canvas-cable: #3ba3d9;
  color-scheme: light;
}

.yds-root[data-theme="dark"] {
  --yds-bg: #17191b;
  --yds-panel: #202326;
  --yds-surface: #272c2d;
  --yds-surface-hover: #303638;
  --yds-fg: #edeef0;
  --yds-muted: #a8b0b8;
  --yds-border: #3b4247;
  --yds-border-strong: #7c8992;
  --yds-disabled: #99a3ab;
  --yds-primary: var(--yds-brand-primary-dark);
  --yds-primary-hover: var(--yds-brand-primary-hover-dark);
  --yds-on-primary: var(--yds-brand-on-primary-dark);
  --yds-primary-soft: var(--yds-brand-primary-soft-dark);
  --yds-primary-border: var(--yds-brand-primary-border-dark);
  --yds-focus: #8ab8f3;
  --yds-success: #7fd4a5;
  --yds-success-soft: #213b2e;
  --yds-success-border: #426b52;
  --yds-warning: #e9c17d;
  --yds-warning-soft: #3b3020;
  --yds-warning-border: #78623a;
  --yds-danger: #ff9b94;
  --yds-danger-hover: #ffb3ad;
  --yds-on-danger: #4c1717;
  --yds-danger-soft: #422727;
  --yds-danger-border: #854747;
  --yds-info: #99c5ff;
  --yds-info-soft: #24344a;
  --yds-info-border: #425f83;
  --yds-overlay: #00000088;
  --yds-shadow-sm: 0 1px 2px #00000026;
  --yds-shadow-md: 0 4px 14px #00000033, 0 1px 3px #00000026;
  --yds-shadow-lg: 0 18px 60px #00000070;
  --yds-canvas-bg: #1a1e21;
  --yds-canvas-grid: #343c42;
  --yds-canvas-label: #8d989f;
  --yds-canvas-board: #2c353a;
  --yds-canvas-board-edge: #66747c;
  --yds-canvas-selection: #f0b07a;
  --yds-canvas-plug: #e2a849;
  --yds-canvas-collision: #ec625b;
  --yds-canvas-clear: #52b892;
  --yds-canvas-cable: #6cc0ec;
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  .yds-root[data-theme="system"] {
    --yds-bg: #17191b;
    --yds-panel: #202326;
    --yds-surface: #272c2d;
    --yds-surface-hover: #303638;
    --yds-fg: #edeef0;
    --yds-muted: #a8b0b8;
    --yds-border: #3b4247;
    --yds-border-strong: #7c8992;
    --yds-disabled: #99a3ab;
    --yds-primary: var(--yds-brand-primary-dark);
    --yds-primary-hover: var(--yds-brand-primary-hover-dark);
    --yds-on-primary: var(--yds-brand-on-primary-dark);
    --yds-primary-soft: var(--yds-brand-primary-soft-dark);
    --yds-primary-border: var(--yds-brand-primary-border-dark);
    --yds-focus: #8ab8f3;
    --yds-success: #7fd4a5;
    --yds-success-soft: #213b2e;
    --yds-success-border: #426b52;
    --yds-warning: #e9c17d;
    --yds-warning-soft: #3b3020;
    --yds-warning-border: #78623a;
    --yds-danger: #ff9b94;
    --yds-danger-hover: #ffb3ad;
    --yds-on-danger: #4c1717;
    --yds-danger-soft: #422727;
    --yds-danger-border: #854747;
    --yds-info: #99c5ff;
    --yds-info-soft: #24344a;
    --yds-info-border: #425f83;
    --yds-overlay: #00000088;
    --yds-shadow-sm: 0 1px 2px #00000026;
    --yds-shadow-md: 0 4px 14px #00000033, 0 1px 3px #00000026;
    --yds-shadow-lg: 0 18px 60px #00000070;
    --yds-canvas-bg: #1a1e21;
    --yds-canvas-grid: #343c42;
    --yds-canvas-label: #8d989f;
    --yds-canvas-board: #2c353a;
    --yds-canvas-board-edge: #66747c;
    --yds-canvas-selection: #f0b07a;
    --yds-canvas-plug: #e2a849;
    --yds-canvas-collision: #ec625b;
    --yds-canvas-clear: #52b892;
    --yds-canvas-cable: #6cc0ec;
    color-scheme: dark;
  }
}

.yds-root[data-canvas="warm"],
.yds-root [data-canvas="warm"] {
  --yds-canvas-bg: #eeebe4;
  --yds-canvas-grid: #c8c2b5;
  --yds-canvas-label: #5f666b;
  --yds-canvas-board: #262d31;
  --yds-canvas-board-edge: #14191c;
  --yds-canvas-selection: #d0632a;
  --yds-canvas-plug: #e2a849;
  --yds-canvas-collision: #e0544e;
  --yds-canvas-clear: #3f9f7e;
  --yds-canvas-cable: #3ba3d9;
}

.yds-root[data-canvas="cool"],
.yds-root [data-canvas="cool"] {
  --yds-canvas-bg: #e5ebed;
  --yds-canvas-grid: #b4c2c7;
  --yds-canvas-label: #56646a;
  --yds-canvas-board: #262d31;
  --yds-canvas-board-edge: #14191c;
  --yds-canvas-selection: #d0632a;
  --yds-canvas-plug: #e2a849;
  --yds-canvas-collision: #e0544e;
  --yds-canvas-clear: #3f9f7e;
  --yds-canvas-cable: #3ba3d9;
}

.yds-root[data-canvas="dark"],
.yds-root [data-canvas="dark"] {
  --yds-canvas-bg: #1a1e21;
  --yds-canvas-grid: #343c42;
  --yds-canvas-label: #8d989f;
  --yds-canvas-board: #2c353a;
  --yds-canvas-board-edge: #66747c;
  --yds-canvas-selection: #f0b07a;
  --yds-canvas-plug: #e2a849;
  --yds-canvas-collision: #ec625b;
  --yds-canvas-clear: #52b892;
  --yds-canvas-cable: #6cc0ec;
}

.yds-root[data-density="comfortable"] {
  --yds-control-height-sm: 28px;
  --yds-control-height: 36px;
  --yds-control-height-lg: 42px;
  --yds-row-pad: 12px;
  --yds-panel-pad: 20px;
}

.yds-root[data-density="compact"] {
  --yds-control-height-sm: 26px;
  --yds-control-height: 30px;
  --yds-control-height-lg: 36px;
  --yds-row-pad: 8px;
  --yds-panel-pad: 16px;
}

@media (prefers-reduced-motion: reduce) {
  .yds-root { --yds-motion-fast: 0ms; --yds-motion-normal: 0ms; --yds-motion-slow: 0ms; }
}