:root {

  --color-bg:            #F4F1E1;
  --color-surface:       #FFFDF5;
  --color-surface-hover: #EDE9D9;
  --color-border:        rgba(26, 26, 26, 0.14);
  --color-border-strong: rgba(26, 26, 26, 0.40);

  --color-text:           #1A1A1A;
  --color-text-secondary: #43423D;
  --color-text-tertiary:  #6A695F;

  --color-accent:       #1A1A1A;
  --color-accent-hover: #000000;
  --color-accent-muted: rgba(26, 26, 26, 0.06);

  --color-primary:        #1A1A1A;
  --color-primary-hover:  #333;
  --color-white:          #FFFDF5;
  --color-white-muted:    rgba(26, 26, 26, 0.45);

  --color-yellow-sticky:  #F5C24E;
  --color-yellow-hover:   #EDB22D;
  --color-yellow-tint:    #FBE9B5;

  --color-success:        #0E8646;
  --color-success-hover:  #0D773E;
  --color-success-border: #0F5C4A;
  --color-success-tint:   #D8EFDF;

  --color-inactive:       #7E7A6F;
  --color-off:            #D5D1C2;

  --color-highlight:        #2C5C8A;
  --color-highlight-tint:   #DCE7F2;
  --color-highlight-light:  #4A7CB0;

  --color-warning:        #B45A0E;
  --color-warning-tint:   #FBDAC7;

  --color-error:          #BA2D1B;
  --color-error-tint:     #F1D6D0;

  --color-value-blue:     #1A1A1A;

  --color-pour-cold:  #1E5DA8;
  --color-pour-room:  #C8BFA8;
  --color-pour-warm:  #E07A2A;
  --color-pour-done:  #1F8F4E;

  --color-gray-600: #666;
  --color-gray-700: #333;
  --color-gray-100: #f5f5f7;

  --color-series-1: #1F6FB2;
  --color-series-2: #E0701B;
  --color-series-3: #1B8C7A;
  --color-series-4: #8E3FB0;
  --color-series-5: #C8A21A;
  --color-series-6: #4A5A6B;

  --pip-base: #424242;

  --font-family:  'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-display: 'Space Grotesk', system-ui, -apple-system, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --font-size-xs:  0.75rem;
  --font-size-sm:  0.875rem;
  --font-size-md:  1rem;
  --font-size-lg:  1.25rem;
  --font-size-xl:  1.5rem;
  --font-size-2xl: 2rem;
  --font-size-3xl: 3rem;
  --font-weight-regular:  400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.125rem;
  --space-xl:  1.5rem;
  --space-2xl: 2rem;

  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   8px;
  --radius-full: 2px;
  --radius-pill: 9999px;

  --shadow-panel:   6px 6px 0 rgba(26, 26, 26, 0.18);
  --shadow-scene:   4px 4px 0 rgba(26, 26, 26, 0.18);
  --shadow-control: 2px 2px 0 rgba(26, 26, 26, 0.18);

  --shadow-button:        2px 2px 0 rgba(26, 26, 26, 0.10);
  --shadow-button-hover:  3px 3px 0 rgba(26, 26, 26, 0.15);
  --shadow-button-active: 1px 1px 0 rgba(26, 26, 26, 0.10);

  --transition-fast:   150ms ease-out;
  --transition-normal: 250ms ease-out;

  --widget-bar-bg:       var(--color-surface);
  --widget-bar-border:   2px solid var(--color-text);
  --widget-bar-radius:   6px;
  --widget-bar-shadow:   var(--shadow-scene);
  --widget-bar-color:    var(--color-text);
  --widget-bar-height:   56px;
  --widget-label-font:   var(--font-mono);
  --widget-label-weight: 500;
  --widget-label-size:   10px;
  --widget-label-tracking: 0.10em;
  --widget-label-color:  var(--color-text-tertiary);
  --widget-btn-radius:   4px;
  --widget-toggle-bg:    var(--color-surface);
  --widget-sep-color:    rgba(26, 26, 26, 0.14);
  --widget-host-width:   fit-content;
  --widget-host-max-width: none;

  --scale-pill-bg:         transparent;
  --scale-pill-border:     none;
  --scale-pill-radius:     2px;
  --scale-pill-color:      var(--color-text);
  --scale-pill-unit-color: var(--color-text-tertiary);
  --scale-value-font:      var(--font-display);
  --scale-value-weight:    600;
  --scale-value-size:      22px;
  --scale-unit-weight:     500;
  --scale-unit-font:       var(--font-mono);
  --scale-unit-size:       11px;
  --scale-zero-bg:         rgba(26, 26, 26, 0.08);
  --scale-track-bg:        var(--color-surface);
  --scale-track-border:    1.5px solid var(--color-text);
  --scale-track-shadow:    none;
  --scale-track-height:    24px;
  --scale-fill-color:      var(--color-success);
  --scale-tick-color:      rgba(10, 66, 56, 0.2);
  --scale-tick-major:      rgba(10, 66, 56, 0.2);

  --step-bar-instruction-font:     var(--font-display);
  --step-bar-instruction-weight:   700;
  --step-bar-instruction-tracking: -0.03em;
  --step-bar-surface:              #FFFDF5;
  --step-bar-border:               2px solid #1A1A1A;
  --step-bar-radius:               12px;
  --step-bar-shadow:               var(--shadow-panel);
  --step-bar-btn-border:           1px solid rgba(26, 26, 26, 0.2);
  --step-bar-btn-radius:           2px;
  --step-bar-btn-bg:               transparent;
  --step-bar-segment-radius:       1px;
  --step-bar-segment-bg:           rgba(26, 26, 26, 0.12);

  --loading-bg:      #F4F1E1;
  --loading-color:   #1A1A1A;
  --loading-sub:     #7a7a7a;
  --loading-spinner: #1A1A1A;
  --loading-ring:    rgba(26, 26, 26, 0.12);

  --completion-card-bg:             #FFFDF5;
  --completion-card-shadow:         var(--shadow-panel);
  --completion-card-border:         1px solid rgba(26, 26, 26, 0.15);
  --completion-card-radius:         6px;
  --completion-title-color:         #1A1A1A;
  --completion-sub-color:           #7a7a7a;
  --completion-btn-primary-bg:      #1A1A1A;
  --completion-btn-primary-border:  #1A1A1A;
  --completion-btn-primary-hover:   #333;
  --completion-btn-secondary-bg:    #FFFDF5;
  --completion-btn-secondary-color: #1A1A1A;
  --completion-btn-secondary-border: rgba(26, 26, 26, 0.2);
  --completion-btn-radius:          2px;

  --restart-bg:     transparent;
  --restart-border: 1px solid rgba(26, 26, 26, 0.15);
  --restart-shadow: var(--shadow-control);

  --info-modal-backdrop:       rgba(26, 26, 26, 0.35);
  --info-modal-bg:             #FFFFFF;
  --info-modal-border:         1.5px solid #1A1A1A;
  --info-modal-radius:         4px;
  --info-modal-item-bg:        rgba(26, 26, 26, 0.03);
  --info-modal-item-accent:    #1A1A1A;
  --info-modal-arrow-bg:       rgba(26, 26, 26, 0.06);
  --info-modal-callout-bg:     rgba(252, 221, 93, 0.15);
  --info-modal-callout-accent: #FFCC66;
  --info-modal-icon-bg:        #FFCC66;
}

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