/* GENERATED by `cargo xtask gen-tokens` from design/tokens/kine.tokens.json — do not edit. */
:root {
  --kine-radius-2xs: 3px;
  --kine-radius-full: 9999px;
  --kine-radius-lg: 14px;
  --kine-radius-md: 10px;
  --kine-radius-panel: 14px;
  --kine-radius-sm: 8px;
  --kine-radius-xl: 18px;
  --kine-radius-xs: 5px;
  --kine-space-0: 0px;
  --kine-space-1: 2px;
  --kine-space-10: 32px;
  --kine-space-11: 40px;
  --kine-space-12: 48px;
  --kine-space-13: 64px;
  --kine-space-2: 4px;
  --kine-space-3: 6px;
  --kine-space-4: 8px;
  --kine-space-5: 10px;
  --kine-space-6: 12px;
  --kine-space-7: 16px;
  --kine-space-8: 20px;
  --kine-space-9: 24px;
  --kine-space-list-edge: 6px;
  --kine-space-page-inset: 24px;
  --kine-space-popup-gap: 2px;
  --kine-space-row-gap: 8px;
  --kine-space-row-inset: 6px;
  --kine-size-action-menu-width: 232px;
  --kine-size-control-lg: 42px;
  --kine-size-control-md: 34px;
  --kine-size-control-sm: 28px;
  --kine-size-control-tray-height: 36px;
  --kine-size-dialog-width: 440px;
  --kine-size-entity-header-cover: 148px;
  --kine-size-font-body: 14px;
  --kine-size-font-section: 16px;
  --kine-size-font-time: 12px;
  --kine-size-home-pickup-compact-below: 520px;
  --kine-size-home-pickup-cover: 168px;
  --kine-size-home-pickup-cover-compact: 104px;
  --kine-size-icon-lg: 24px;
  --kine-size-icon-md: 20px;
  --kine-size-icon-sm: 16px;
  --kine-size-line-bar-thickness: 10px;
  --kine-size-lyric-instrumental-dot: 6px;
  --kine-size-lyric-instrumental-dot-lg: 18px;
  --kine-size-lyric-word-rise: 2px;
  --kine-size-panel-header: 44px;
  --kine-size-popup-shadow-blur: 6px;
  --kine-size-popup-shadow-y: 2px;
  --kine-size-row-border: 1px;
  --kine-size-row-comfortable: 48px;
  --kine-size-row-compact: 44px;
  --kine-size-row-gutter: 32px;
  --kine-size-row-spacious: 62px;
  --kine-size-search-width: 520px;
  --kine-size-setting-control-width: 320px;
  --kine-size-setting-nav-width: 240px;
  --kine-size-side-panel-width: 320px;
  --kine-size-sidebar-width: 248px;
  --kine-size-title-field-height: 34px;
  --kine-size-titlebar-height: 48px;
  --kine-size-toast-width: 360px;
  --kine-size-toggle-height: 30px;
  --kine-size-toggle-thumb: 24px;
  --kine-size-toggle-width: 64px;
  --kine-size-touch-min: 44px;
  --kine-size-tray-padding: 2px;
  --kine-size-wave-bar-height: 24px;
  --kine-motion-base: 180ms;
  --kine-motion-fast: 120ms;
  --kine-motion-lyric-hold: 1200ms;
  --kine-motion-slow: 280ms;
  --kine-text-body: 400 14px/20px Figtree, system-ui, sans-serif;
  --kine-text-body-strong: 600 14px/20px Figtree, system-ui, sans-serif;
  --kine-text-caption: 500 11px/16px Figtree, system-ui, sans-serif;
  --kine-text-display: 700 40px/48px Figtree, system-ui, sans-serif;
  --kine-text-headline: 700 28px/36px Figtree, system-ui, sans-serif;
  --kine-text-small: 400 12px/16px Figtree, system-ui, sans-serif;
  --kine-text-subtitle: 500 16px/24px Figtree, system-ui, sans-serif;
  --kine-text-title: 600 20px/28px Figtree, system-ui, sans-serif;
}
:root, :root[data-theme="dark"] {
  --kine-canvas: #181614;
  --kine-chrome: #151311;
  --kine-divider: #FFFFFF12;
  --kine-divider-strong: #FFFFFF24;
  --kine-fg: #F1EDE8;
  --kine-fg-2: #D6D0C9;
  --kine-fg-disabled: #4A4540;
  --kine-fg-muted: #A29A92;
  --kine-fg-subtle: #7C746D;
  --kine-frame: #131110;
  --kine-inlay: #282522;
  --kine-inlay-edge: #FFFFFF1A;
  --kine-overlay: #302D2A;
  --kine-plate: #1E1B19;
  --kine-plate-edge: #FFFFFF14;
  --kine-raised: #232120;
  --kine-scrim: #0A0908CC;
  --kine-seam: #FFFFFF10;
  --kine-shadow: #00000066;
  --kine-sunken: #0E0D0C;
  --kine-surface: #1F1C1A;
  --kine-tint-1: #C9785F;
  --kine-tint-2: #7C5B6B;
  --kine-tint-3: #C9A26B;
  --kine-well: #0F0E0D;
  --kine-danger: #F0616D;
  --kine-info: #4DB6E6;
  --kine-success: #3DBE7E;
  --kine-warning: #E9A23B;
  --kine-accent: #D66762;
}
:root[data-theme="light"] {
  --kine-canvas: #F2EFEA;
  --kine-chrome: #ECE8E2;
  --kine-divider: #1C191614;
  --kine-divider-strong: #1C191630;
  --kine-fg: #1C1916;
  --kine-fg-2: #3A3531;
  --kine-fg-disabled: #BDB5AD;
  --kine-fg-muted: #6A625B;
  --kine-fg-subtle: #827A72;
  --kine-frame: #E6E2DC;
  --kine-inlay: #FFFFFF;
  --kine-inlay-edge: #1C19161A;
  --kine-overlay: #E5E0D9;
  --kine-plate: #F6F3EF;
  --kine-plate-edge: #FFFFFFB0;
  --kine-raised: #FFFFFF;
  --kine-scrim: #1C191666;
  --kine-seam: #1C191612;
  --kine-shadow: #1C191633;
  --kine-sunken: #DDD8D1;
  --kine-surface: #F8F6F3;
  --kine-tint-1: #E6A58C;
  --kine-tint-2: #B79AAF;
  --kine-tint-3: #E3C28F;
  --kine-well: #E4DFD8;
  --kine-danger: #C62A38;
  --kine-info: #0E6E99;
  --kine-success: #177A47;
  --kine-warning: #8F5A00;
  --kine-accent: #B03F39;
}
:root[data-theme="midnight"] {
  --kine-canvas: #0B101A;
  --kine-chrome: #080D16;
  --kine-divider: #C8DFFF12;
  --kine-divider-strong: #C8DFFF24;
  --kine-fg: #E8EEF7;
  --kine-fg-2: #C8D4E6;
  --kine-fg-disabled: #3B4A62;
  --kine-fg-muted: #96A6BF;
  --kine-fg-subtle: #71839F;
  --kine-frame: #060910;
  --kine-inlay: #182335;
  --kine-inlay-edge: #C8DFFF1A;
  --kine-overlay: #1C293B;
  --kine-plate: #0E1521;
  --kine-plate-edge: #C8DFFF14;
  --kine-raised: #151E2D;
  --kine-scrim: #02050ACC;
  --kine-seam: #C8DFFF10;
  --kine-shadow: #00000080;
  --kine-sunken: #04070D;
  --kine-surface: #101724;
  --kine-tint-1: #416C9F;
  --kine-tint-2: #625784;
  --kine-tint-3: #3F7C8A;
  --kine-well: #050A12;
  --kine-danger: #F0616D;
  --kine-info: #4DB6E6;
  --kine-success: #3DBE7E;
  --kine-warning: #E9A23B;
  --kine-accent: #D66762;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
  --kine-canvas: #F2EFEA;
  --kine-chrome: #ECE8E2;
  --kine-divider: #1C191614;
  --kine-divider-strong: #1C191630;
  --kine-fg: #1C1916;
  --kine-fg-2: #3A3531;
  --kine-fg-disabled: #BDB5AD;
  --kine-fg-muted: #6A625B;
  --kine-fg-subtle: #827A72;
  --kine-frame: #E6E2DC;
  --kine-inlay: #FFFFFF;
  --kine-inlay-edge: #1C19161A;
  --kine-overlay: #E5E0D9;
  --kine-plate: #F6F3EF;
  --kine-plate-edge: #FFFFFFB0;
  --kine-raised: #FFFFFF;
  --kine-scrim: #1C191666;
  --kine-seam: #1C191612;
  --kine-shadow: #1C191633;
  --kine-sunken: #DDD8D1;
  --kine-surface: #F8F6F3;
  --kine-tint-1: #E6A58C;
  --kine-tint-2: #B79AAF;
  --kine-tint-3: #E3C28F;
  --kine-well: #E4DFD8;
  }
}
:root[data-accent="amber"] { --kine-accent: #E9A23B; }
:root[data-theme="light"][data-accent="amber"] { --kine-accent: #8F5A00; }
:root[data-accent="blue"] { --kine-accent: #4F8DF5; }
:root[data-theme="light"][data-accent="blue"] { --kine-accent: #2152C4; }
:root[data-accent="coral"] { --kine-accent: #D66762; }
:root[data-theme="light"][data-accent="coral"] { --kine-accent: #B03F39; }
:root[data-accent="graphite"] { --kine-accent: #B0B0B0; }
:root[data-theme="light"][data-accent="graphite"] { --kine-accent: #444444; }
:root[data-accent="green"] { --kine-accent: #3DBE7E; }
:root[data-theme="light"][data-accent="green"] { --kine-accent: #177A47; }
:root[data-accent="magenta"] { --kine-accent: #E25CB6; }
:root[data-theme="light"][data-accent="magenta"] { --kine-accent: #A81F78; }
:root[data-accent="orange"] { --kine-accent: #E8851A; }
:root[data-theme="light"][data-accent="orange"] { --kine-accent: #9A5000; }
:root[data-accent="teal"] { --kine-accent: #2BB5C9; }
:root[data-theme="light"][data-accent="teal"] { --kine-accent: #0B6E7F; }
:root[data-accent="violet"] { --kine-accent: #9A80FF; }
:root[data-theme="light"][data-accent="violet"] { --kine-accent: #5B3FE0; }