:root {
  --as-primary: #007acc;
  --as-text-secondary: #666;

    --color-primary: 196 100% 11%;
    --color-primary-foreground: 240 100% 99%;
    --color-secondary: 192 100% 32%;
    --color-secondary-foreground: 240 100% 99%;
    --color-accent: 192 43% 76%;
    --color-accent-foreground: 196 100% 11%;
    --color-workflow-accent: 192 56% 70%;
    --color-slider-track-active: 196 100% 11%;
    --color-slider-track-inactive: 0 0% 89%;
    --color-slider-handle: 196 100% 11%;

  --gradient-flower-macro: radial-gradient(ellipse 80% 60% at 20% 80%, hsl(var(--color-primary) / var(--step-panel-background-opacity)) 0%, transparent 70%), 
  radial-gradient(ellipse 70% 80% at 80% 20%, hsl(var(--color-secondary) / calc(.9 * var(--step-panel-background-opacity))) 0%, transparent 80%), 
  radial-gradient(ellipse 90% 40% at 40% 60%, hsl(var(--color-primary) / calc(.8 * var(--step-panel-background-opacity))) 0%, transparent 90%), 
  linear-gradient(145deg, hsl(var(--color-primary) / var(--step-panel-background-opacity)), hsl(var(--color-secondary) / calc(.9 * var(--step-panel-background-opacity))), hsl(var(--color-primary) / calc(.8 * var(--step-panel-background-opacity))))

  /* Number Box */
  --numbox-label-gap: 4px;
  --numbox-padding: 4px;
  --numbox-padding-right: 1rem;
  --numbox-border-radius: 6px;
  --numbox-container-border-radius: 1rem;
  --numbox-container-border-color: #ccc;
  --numbox-container-border-width: 2px;
  --numbox-container-bg: white;
  --numbox-container-padding: 4px 8px;
  --numbox-focus-color: #007acc;
  --numbox-focus-width: 2px;
  --numbox-text-color: inherit;
  --numbox-unit-color: #666;
  --numbox-control-btn-size: 16px 12px;
  --numbox-control-btn-bg: #f5f5f5;
  --numbox-control-btn-border: 1px solid #ccc;
  --numbox-control-btn-hover-bg: #e5e5e5;
  --numbox-control-btn-active-bg: #ddd;
  --numbox-control-btn-radius: 2px;
  --numbox-slider-height: 4px;
  --numbox-slider-bg: #ddd;
  --numbox-slider-thumb-size: 12px;
  --numbox-slider-thumb-color: var(--as-primary, #007acc);
  --numbox-label-font-size: 0.85em;
  --numbox-label-color: var(--as-text-secondary, #666);
  --numbox-label-height: 1.2em;

  /* Text Button */
  --text-btn-padding: unset;
  --text-btn-padding-x: 1rem;
  --text-btn-padding-y: 0.5rem;
  --text-btn-radius: 0.5rem;
  --text-btn-size: 100%;
  --text-btn-bg-col: black;
  --text-btn-text-col: white;
  --text-btn-hover-bg-col: #002738;
  --text-btn-hover-text-col: #ffffff;
  --text-btn-font-size: 1rem;
  --text-btn-font-weight: normal;
  --text-btn-min-width: auto;
  --text-btn-max-width: none;
  --text-btn-width: 100%;
  --text-btn-transition: background-color 0.2s ease, color 0.2s ease;
  --text-btn-focus-outline: none;
  --text-btn-focus-outline-offset: 2px;
  --text-btn-focus-box-shadow: none;
  --text-btn-focus-visible-outline: 2px solid #0066cc;
  --text-btn-focus-visible-outline-offset: 2px;
  --text-btn-focus-visible-box-shadow: none;
  --text-btn-focus-outline-col: #0066cc;
  --text-btn-active-transform: translateY(1px);
  --text-btn-disabled-opacity: 0.6;

  /* Button Variables */
  --button-padding-y: 0.375rem;
  --button-padding-x: 0.75rem;
  --default-radius: 0.5rem;
  --button-height: 2.5rem;
  --col-panel-button-base: #e0e0e0;
  --col-dark: #002738;

  /* Legacy Mappings */
  --button-padding-y: var(--text-btn-padding-y);
  --button-padding-x: var(--text-btn-padding-x);
  --button-radius: var(--text-btn-radius);
  --button-height: var(--text-btn-size);
  --button-bg-color: var(--text-btn-bg-col);
  --button-hover-bg-color: var(--text-btn-hover-bg-col);
  --text-color: var(--text-btn-text-col);
  --button-hover-text-color: var(--text-btn-hover-text-col);
}