/* AUTO-GENERATED — DO NOT EDIT.
 * Source: design/tokens/tokens.json  •  Generator: scripts/generate-web-skin.mjs
 * Regenerate with: npm run tokens
 *
 * Skin: neu. Every value here is the one the app renders — parity is
 * asserted for all 36 recipe states by scripts/web-skin-parity.test.mjs.
 *
 * NOT the whole skin. Values with no token behind them — seam caps, tab notches,
 * the one-off insets in skin-neu.css — cannot be generated and belong in a
 * hand-written companion. The rule: if a value HAS a token, take it from here.
 * Hand-overriding a tokenised value is the drift this file exists to end.
 */

:root {
  /* color */
  --k-color-stone: #DFE3D4;
  --k-color-panel: #DFE3D4;
  --k-color-panel-sunk: #D2D8C2;
  --k-color-panel-mine: #CFDAB4;
  --k-color-panel-mine-sunk: #C2CFA3;
  --k-color-ink: #292B25;
  --k-color-muted: #474940;
  --k-color-faint: #5C5E53;
  --k-color-idle: #757769;
  --k-color-faded: #8B9179;
  --k-color-hairline: #292B25;
  --k-color-moss: #88A25F;
  --k-color-moss-text: #4C5A34;
  --k-color-moss-ink: #21270F;
  --k-color-on-ink: #E9EAE4;
  --k-color-danger: #9C5A44;
  --k-color-danger-text: #874E3B;
  --k-color-danger-ink: #F1EEE7;
  /* space */
  --k-space-xs: 4px;
  --k-space-sm: 8px;
  --k-space-md: 16px;
  --k-space-lg: 24px;
  --k-space-xl: 32px;
  --k-space-xxl: 48px;
  --k-space-gutter: 24px;
  --k-space-row-pad: 15px;
  /* radius */
  --k-radius-control: 14px;
  --k-radius-card: 20px;
  --k-radius-screen: 14px;
  --k-radius-full: 9999px;
  /* borderWidth */
  --k-borderWidth-stroke: 0px;
  --k-borderWidth-hair: 0px;
  /* font */
  --k-font-family-head: Bricolage Grotesque;
  --k-font-family-mono: IBM Plex Mono;
  --k-font-family-body: Hanken Grotesk;
  --k-font-size-xs: 12px;
  --k-font-size-sm: 14px;
  --k-font-size-md: 16px;
  --k-font-size-lg: 20px;
  --k-font-size-xl: 24px;
  --k-font-size-xxl: 32px;
  --k-font-size-display: 40px;
  --k-font-weight-regular: 400;
  --k-font-weight-medium: 500;
  --k-font-weight-semibold: 600;
  --k-font-weight-bold: 700;
  --k-font-weight-black: 800;
  --k-font-line-height-xs: 16px;
  --k-font-line-height-sm: 20px;
  --k-font-line-height-md: 24px;
  --k-font-line-height-lg: 28px;
  --k-font-line-height-xl: 32px;
  --k-font-line-height-display: 48px;
  /* elevation */
  --k-elevation-raised: -7px -7px 16px rgba(255,255,255,.92), 7px 7px 16px rgba(139,148,120,.6);
  --k-elevation-raised-sm: -4px -4px 9px rgba(255,255,255,.88), 4px 4px 9px rgba(139,148,120,.55);
  --k-elevation-sunk: inset -5px -5px 10px rgba(255,255,255,.82), inset 5px 5px 12px rgba(139,148,120,.6);
  --k-elevation-sunk-sm: inset -3px -3px 6px rgba(255,255,255,.78), inset 3px 3px 7px rgba(139,148,120,.55);
  --k-elevation-none: none;
}

.k-btn {
  background: #DFE3D4;
  border-radius: 9999px;
  box-shadow: -4px -4px 9px rgba(255,255,255,.88), 4px 4px 9px rgba(139,148,120,.55);
}

.k-btn--pressed {
  background: #DFE3D4;
  border-radius: 9999px;
  box-shadow: inset -3px -3px 6px rgba(255,255,255,.78), inset 3px 3px 7px rgba(139,148,120,.55);
}

.k-btn--disabled {
  background: #DFE3D4;
  border-radius: 9999px;
  box-shadow: -4px -4px 9px rgba(255,255,255,.3), 4px 4px 9px rgba(139,148,120,.12);
}

.k-btn-go {
  background: #88A25F;
  border-radius: 9999px;
  box-shadow: -4px -4px 9px rgba(255,255,255,.7), 4px 4px 10px rgba(112,133,74,.5);
}

.k-btn-go--pressed {
  background: #88A25F;
  border-radius: 9999px;
  box-shadow: inset 3px 3px 7px rgba(63,78,38,.45);
}

.k-btn-danger {
  background: #DFE3D4;
  border-radius: 9999px;
  box-shadow: -4px -4px 9px rgba(255,255,255,.88), 4px 4px 9px rgba(139,148,120,.55);
}

.k-btn-danger--pressed {
  background: #DFE3D4;
  border-radius: 9999px;
  box-shadow: inset -3px -3px 6px rgba(255,255,255,.78), inset 3px 3px 7px rgba(139,148,120,.55);
}

.k-action-pair {
  background: #DFE3D4;
  border-radius: 9999px;
  box-shadow: -4px -4px 9px rgba(255,255,255,.88), 4px 4px 9px rgba(139,148,120,.55);
}

.k-ap-cell--go-fill {
  background: #88A25F;
  border-radius: 9999px;
  box-shadow: none;
}

.k-ap-cell--seg-fill {
  background: #C2CFA3;
  border-radius: 9999px;
  box-shadow: inset -3px -3px 6px rgba(255,255,255,.6), inset 3px 3px 7px rgba(112,133,74,.5);
}

.k-ap-cell--pressed {
  background: #DFE3D4;
  border-radius: 9999px;
  box-shadow: inset -3px -3px 6px rgba(255,255,255,.78), inset 3px 3px 7px rgba(139,148,120,.55);
}

.k-chip--off {
  background: #DFE3D4;
  border-radius: 14px;
  box-shadow: -4px -4px 9px rgba(255,255,255,.88), 4px 4px 9px rgba(139,148,120,.55);
}

.k-chip--on {
  background: #88A25F;
  border-radius: 14px;
  box-shadow: -4px -4px 9px rgba(255,255,255,.88), 4px 4px 9px rgba(139,148,120,.55);
}

.k-sbar {
  background: #D2D8C2;
  box-shadow: none;
}

.k-sbar--mine {
  background: #C2CFA3;
  box-shadow: none;
}

.k-caret-btn {
  background: #DFE3D4;
  border-radius: 9999px;
  box-shadow: -4px -4px 9px rgba(255,255,255,.88), 4px 4px 9px rgba(139,148,120,.55);
}

.k-caret-btn--open {
  background: #D2D8C2;
  border-radius: 9999px;
  box-shadow: inset -3px -3px 6px rgba(255,255,255,.78), inset 3px 3px 7px rgba(139,148,120,.55);
}

.k-radio {
  background: #D2D8C2;
  border-radius: 9px;
  box-shadow: inset -3px -3px 6px rgba(255,255,255,.78), inset 3px 3px 7px rgba(139,148,120,.55);
}

.k-avatar {
  background: #DFE3D4;
  box-shadow: -4px -4px 9px rgba(255,255,255,.88), 4px 4px 9px rgba(139,148,120,.55);
}

.k-qr {
  background: #CFDAB4;
  border-radius: 20px;
  box-shadow: -7px -7px 16px rgba(255,255,255,.92), 7px 7px 16px rgba(139,148,120,.6);
}

.k-toggle-track2--off {
  background: #D2D8C2;
  border-radius: 14px;
  box-shadow: inset -3px -3px 6px rgba(255,255,255,.78), inset 3px 3px 7px rgba(139,148,120,.55), inset 0 0 0 1.5px rgba(255,255,255,.55);
}

.k-toggle-track2--on {
  background: #88A25F;
  border-radius: 14px;
  box-shadow: inset -3px -3px 6px rgba(255,255,255,.78), inset 3px 3px 7px rgba(139,148,120,.55);
}

.k-toggle-track2--suspended {
  background: #D2D8C2;
  border-radius: 14px;
  box-shadow: inset -3px -3px 6px rgba(255,255,255,.78), inset 3px 3px 7px rgba(139,148,120,.55);
}

.k-toggle-knob2 {
  background: #F5F6F1;
  box-shadow: -2px -2px 5px rgba(255,255,255,.95), 2px 2px 6px rgba(139,148,120,.6);
}

.k-tab-bar2 {
  background: #DFE3D4;
  box-shadow: 0 -10px 24px -18px rgba(139,148,120,.9);
}

.k-nav-tab--active {
  background: #C2CFA3;
  border-radius: 14px;
  box-shadow: inset -3px -3px 6px rgba(255,255,255,.6), inset 3px 3px 7px rgba(112,133,74,.5);
}

.k-tab-add {
  background: #88A25F;
  border-radius: 9999px;
  box-shadow: -4px -4px 9px rgba(255,255,255,.7), 4px 4px 10px rgba(112,133,74,.5);
}

.k-sheet2 {
  background: #DFE3D4;
  border-radius: 20px;
  box-shadow: -7px -7px 16px rgba(255,255,255,.92), 7px 7px 16px rgba(139,148,120,.6);
}

.k-sheet2--mine {
  background: #CFDAB4;
  border-radius: 20px;
  box-shadow: -7px -7px 16px rgba(255,255,255,.92), 7px 7px 16px rgba(139,148,120,.6);
}

.k-sheet-pop2 {
  background: #DFE3D4;
  border-radius: 26px;
  box-shadow: 0 -16px 40px -16px rgba(107,116,90,.75);
}

.k-legend {
  background: #DFE3D4;
  border-radius: 20px;
  box-shadow: -7px -7px 16px rgba(255,255,255,.92), 7px 7px 16px rgba(139,148,120,.6);
}

.k-spot-badge {
  background: #88A25F;
  border-radius: 10px;
  border: 1.5px solid #DFE3D4;
  box-shadow: none;
}

.k-input {
  background: #DFE3D4;
  border-radius: 20px;
  box-shadow: inset -3px -3px 6px rgba(255,255,255,.78), inset 3px 3px 7px rgba(139,148,120,.55);
}

.k-tab2--idle {
  background: #DFE3D4;
  border-radius: 20px;
  box-shadow: -5px -5px 10px rgba(255,255,255,.8);
}

.k-tab2--active {
  background: #D2D8C2;
  border-radius: 20px;
  box-shadow: 0 6px 0 #D2D8C2, -5px -5px 10px rgba(255,255,255,.8);
}

.k-tab2--mine {
  background: #CFDAB4;
  border-radius: 20px;
  box-shadow: 0 6px 0 #CFDAB4, -5px -5px 10px rgba(255,255,255,.8);
}