/* Shared Recipe Workbench semantic aliases. Global primitives remain in design_system.css. */

.recipe-app {
  --recipe-ink: var(--ink);
  --recipe-muted: var(--gray-5);
  --recipe-canvas: var(--paper);
  --recipe-surface: var(--paper-bright);
  --recipe-surface-muted: var(--gray-1);
  --recipe-line: var(--line);
  --recipe-line-soft: var(--line-faint);
  --recipe-line-strong: var(--line-strong);
  --recipe-accent: var(--sage-green);
  --recipe-accent-strong: var(--dark-green);
  --recipe-accent-wash: var(--paint-1);

  --recipe-success: #2f6b3f;
  --recipe-success-wash: #edf6ef;
  --recipe-danger: var(--terra-cotta);
  --recipe-danger-wash: #fff2f2;
  --recipe-warning: var(--mustard);
  --recipe-warning-wash: #fff8e1;
  --recipe-information: var(--slate);
  --recipe-information-wash: #eef3f7;

  --recipe-font-metadata: 0.75rem;
  --recipe-font-compact: 0.8125rem;
  --recipe-font-control: 0.875rem;
  --recipe-font-working: 0.9375rem;
  --recipe-font-body: 1rem;
  --recipe-font-subheading: 1.125rem;
  --recipe-font-heading: 1.25rem;
  --recipe-font-title: 1.5rem;
  --recipe-font-display: 2rem;

  --recipe-control-compact: var(--control-height-compact, 32px);
  --recipe-control-default: var(--control-height-default, 40px);
  --recipe-control-touch: var(--control-height-touch, 44px);
  --recipe-radius-small: var(--r-1);
  --recipe-radius-medium: var(--r-2);
  --recipe-radius-large: 12px;
  --recipe-radius-status: 999px;
  --recipe-shadow-surface: 0 1px 2px color-mix(in srgb, var(--recipe-ink) 6%, transparent);
  --recipe-shadow-overlay: 0 12px 28px color-mix(in srgb, var(--recipe-ink) 16%, transparent);
  --recipe-shadow-focus: 0 0 0 3px color-mix(in srgb, var(--recipe-accent) 24%, transparent);
  --recipe-motion-fast: var(--t-fast);
  --recipe-motion-medium: 180ms;
  --recipe-focus-ring: var(--focus-ring, 2px solid var(--recipe-ink));
  --recipe-focus-offset: var(--focus-ring-offset, 2px);
}

@media (max-width: 768px) {
  .recipe-app :is(button, input, select, textarea, summary, [role="button"]):not([type="hidden"]):not([type="checkbox"]):not([type="radio"]) {
    min-height: var(--recipe-control-touch);
  }
}

@media (prefers-reduced-motion: reduce) {
  .recipe-app *,
  .recipe-app *::before,
  .recipe-app *::after {
    scroll-behavior: auto;
    transition-duration: 0.01ms;
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
  }
}