/*
 * SOUS Service App — semantic tokens
 *
 * The bundled `_ds` stylesheet owns the raw palette and scales. This file maps
 * those foundations to stable product roles. Feature CSS should prefer these
 * names over raw hex values or palette steps.
 */

:root {
  /* Typography — foundational size scale */
  --svc-font-family: var(--font-sans);
  --svc-font-size-12: 12px;
  --svc-font-size-13: 13px;
  --svc-font-size-14: 14px;
  --svc-font-size-15: 15px;
  --svc-font-size-16: 16px;
  --svc-font-size-18: 18px;
  --svc-font-size-20: 20px;
  --svc-font-size-22: 22px;
  --svc-font-size-24: 24px;
  --svc-font-size-28: 28px;
  --svc-font-size-32: 32px;
  --svc-font-size-40: 40px;

  /* Typography — foundational line-height scale */
  --svc-line-height-12: 16px;
  --svc-line-height-13: 18px;
  --svc-line-height-14: 20px;
  --svc-line-height-15: 22px;
  --svc-line-height-16: 24px;
  --svc-line-height-18: 26px;
  --svc-line-height-20: 24px;
  --svc-line-height-22: 28px;
  --svc-line-height-24: 30px;
  --svc-line-height-28: 34px;
  --svc-line-height-32: 38px;
  --svc-line-height-40: 44px;

  /* Typography — weight scale */
  --svc-font-weight-regular: 400;
  --svc-font-weight-medium: 500;
  /* Absolute product ceiling. Prefer 400–500; reserve 600 for rare anchors. */
  --svc-font-weight-semibold: 600;

  /* Typography — tracking */
  --svc-letter-spacing-tight: -.03em;
  --svc-letter-spacing-heading: -.02em;
  --svc-letter-spacing-body: 0;

  /*
   * Typography — semantic roles
   * Feature and component CSS should use these roles instead of raw size steps.
   */
  --svc-type-display-size: var(--svc-font-size-40);
  --svc-type-display-line-height: var(--svc-line-height-40);
  --svc-type-display-weight: var(--svc-font-weight-medium);
  --svc-type-display-tracking: var(--svc-letter-spacing-tight);

  --svc-type-page-title-size: var(--svc-font-size-28);
  --svc-type-page-title-line-height: var(--svc-line-height-28);
  --svc-type-page-title-weight: var(--svc-font-weight-medium);
  --svc-type-page-title-tracking: var(--svc-letter-spacing-tight);

  --svc-type-heading-size: var(--svc-font-size-24);
  --svc-type-heading-line-height: var(--svc-line-height-24);
  --svc-type-heading-weight: var(--svc-font-weight-medium);
  --svc-type-heading-tracking: var(--svc-letter-spacing-heading);

  --svc-type-panel-title-size: var(--svc-font-size-22);
  --svc-type-panel-title-line-height: var(--svc-line-height-22);
  --svc-type-panel-title-weight: var(--svc-font-weight-medium);
  --svc-type-panel-title-tracking: var(--svc-letter-spacing-heading);

  --svc-type-section-title-size: var(--svc-font-size-20);
  --svc-type-section-title-line-height: var(--svc-line-height-20);
  --svc-type-section-title-weight: var(--svc-font-weight-medium);
  --svc-type-section-title-tracking: var(--svc-letter-spacing-heading);

  --svc-type-metric-size: var(--svc-font-size-20);
  --svc-type-metric-line-height: var(--svc-line-height-20);
  --svc-type-metric-weight: var(--svc-font-weight-medium);
  --svc-type-metric-tracking: var(--svc-letter-spacing-body);

  --svc-type-data-size: var(--svc-font-size-16);
  --svc-type-data-line-height: var(--svc-line-height-16);
  --svc-type-data-weight: var(--svc-font-weight-medium);
  --svc-type-data-tracking: var(--svc-letter-spacing-body);

  --svc-type-body-large-size: var(--svc-font-size-18);
  --svc-type-body-large-line-height: var(--svc-line-height-18);
  --svc-type-body-large-weight: var(--svc-font-weight-regular);
  --svc-type-body-large-tracking: var(--svc-letter-spacing-body);

  --svc-type-body-size: var(--svc-font-size-16);
  --svc-type-body-line-height: var(--svc-line-height-16);
  --svc-type-body-weight: var(--svc-font-weight-regular);
  --svc-type-body-tracking: var(--svc-letter-spacing-body);

  --svc-type-control-size: var(--svc-font-size-16);
  --svc-type-control-line-height: var(--svc-line-height-16);
  --svc-type-control-weight: var(--svc-font-weight-medium);
  --svc-type-control-tracking: var(--svc-letter-spacing-body);

  --svc-type-label-size: var(--svc-font-size-14);
  --svc-type-label-line-height: var(--svc-line-height-14);
  --svc-type-label-weight: var(--svc-font-weight-medium);
  --svc-type-label-tracking: var(--svc-letter-spacing-body);

  --svc-type-support-size: var(--svc-font-size-14);
  --svc-type-support-line-height: var(--svc-line-height-14);
  --svc-type-support-weight: var(--svc-font-weight-regular);
  --svc-type-support-tracking: var(--svc-letter-spacing-body);

  --svc-type-status-size: var(--svc-font-size-14);
  --svc-type-status-line-height: var(--svc-line-height-14);
  --svc-type-status-weight: var(--svc-font-weight-medium);
  --svc-type-status-tracking: var(--svc-letter-spacing-body);

  --svc-type-utility-size: var(--svc-font-size-15);
  --svc-type-utility-line-height: var(--svc-line-height-15);
  --svc-type-utility-weight: var(--svc-font-weight-medium);
  --svc-type-utility-tracking: var(--svc-letter-spacing-body);

  --svc-type-caption-size: var(--svc-font-size-13);
  --svc-type-caption-line-height: var(--svc-line-height-13);
  --svc-type-caption-weight: var(--svc-font-weight-medium);
  --svc-type-caption-tracking: var(--svc-letter-spacing-body);

  --svc-type-micro-size: var(--svc-font-size-12);
  --svc-type-micro-line-height: var(--svc-line-height-12);
  --svc-type-micro-weight: var(--svc-font-weight-medium);
  --svc-type-micro-tracking: var(--svc-letter-spacing-body);

  --svc-type-rail-label-size: var(--svc-font-size-12);
  --svc-type-rail-label-line-height: var(--svc-line-height-12);
  --svc-type-rail-label-weight: var(--svc-font-weight-semibold);
  --svc-type-rail-label-tracking: -.01em;

  /* Compatibility aliases used by the first component migration. */
  --svc-font-size-caption: var(--svc-type-caption-size);
  --svc-font-size-label: var(--svc-type-label-size);
  --svc-font-size-control: var(--svc-type-control-size);
  --svc-font-size-body: var(--svc-type-body-size);
  --svc-font-size-heading: var(--svc-type-section-title-size);
  --svc-font-size-title: var(--svc-type-page-title-size);
  --svc-line-height-tight: var(--svc-type-section-title-line-height);
  --svc-line-height-body: var(--svc-type-body-line-height);

  /* Content */
  --svc-color-text: var(--neutral-950);
  --svc-color-text-secondary: var(--neutral-500);
  --svc-color-text-muted: var(--neutral-400);
  --svc-color-text-inverse: var(--white);
  --svc-color-icon: var(--neutral-700);

  /* Surfaces */
  --svc-color-canvas: var(--neutral-100);
  --svc-color-surface: var(--white);
  --svc-color-surface-subtle: var(--neutral-100);
  --svc-color-fill: var(--neutral-200);
  --svc-color-fill-strong: var(--neutral-300);
  --svc-color-overlay: color-mix(in srgb, var(--neutral-950) 42%, transparent);

  /* Borders */
  --svc-color-border: var(--neutral-200);
  --svc-color-border-subtle: var(--neutral-100);
  --svc-color-border-strong: var(--neutral-300);

  /* Actions */
  --svc-color-action-primary: var(--neutral-950);
  --svc-color-action-primary-hover: var(--neutral-800);
  --svc-color-action-secondary: var(--svc-color-fill);
  --svc-color-action-secondary-hover: var(--svc-color-fill-strong);
  --svc-color-focus: color-mix(in srgb, var(--neutral-950) 18%, transparent);

  /* Status */
  --svc-color-info: var(--blue-600);
  --svc-color-info-surface: var(--blue-100);
  --svc-color-success: var(--success-600);
  --svc-color-success-surface: var(--success-50);
  --svc-color-warning: var(--warning-700);
  --svc-color-warning-surface: var(--warning-50);
  --svc-color-danger: var(--error-500);
  --svc-color-danger-surface: var(--error-50);
  --svc-color-brand: var(--blue-600);
  --svc-color-destructive-surface: var(--error-50);
  --svc-color-destructive-text-muted: rgb(122 39 26 / 62%);
  --svc-color-feedback-success-surface: #dcfce7;
  --svc-color-feedback-success: #15803d;
  --svc-color-slider-track: #dedee3;
  --svc-color-fact-surface: #f6f6f8;
  --svc-color-rail-ring: #f0f0f0;
  --svc-color-channel-uber-eats: #06c167;
  --svc-color-channel-thuisbezorgd: #ff8000;
  --svc-color-quiet-pressed: rgb(10 10 10 / 4.5%);
  --svc-color-selection-muted: rgb(20 20 30 / 6.5%);
  --svc-color-warning-pulse: rgb(247 144 9 / 55%);
  --svc-color-warning-pulse-clear: rgb(247 144 9 / 0%);
  --svc-color-danger-pulse: rgb(240 68 56 / 50%);
  --svc-color-danger-pulse-clear: rgb(240 68 56 / 0%);

  /* Operational roles extracted from the accepted Service App screens. */
  --svc-color-operational-canvas: #f7f7f8;
  --svc-color-operational-surface: var(--white);
  --svc-color-operational-fill: #f0f0f2;
  --svc-color-operational-fill-subtle: #f5f5f7;
  --svc-color-operational-selected: #eef3ff;
  --svc-color-operational-text: #090909;
  --svc-color-operational-text-secondary: #707079;
  --svc-color-operational-text-tertiary: #8d919b;
  --svc-color-order-detail-muted: #6f737c;
  --svc-color-operational-border: #d0d0d5;
  --svc-color-operational-divider: #e2e2e5;
  --svc-color-operational-divider-subtle: #ececef;
  --svc-color-operational-divider-soft: #e5e5e7;
  --svc-color-operational-fill-muted: #e7e7e9;
  --svc-color-operational-fill-hover: #ececee;
  --svc-color-operational-fill-disabled: #dedee1;
  --svc-color-operational-fill-disabled-strong: #e4e4e8;
  --svc-color-operational-fill-overlay: rgb(16 24 40 / 8%);
  --svc-color-operational-border-muted: #c4c6cb;
  --svc-color-operational-border-disabled: #bfc2c9;
  --svc-color-operational-text-strong: #4a4d54;
  --svc-color-operational-text-support: #626773;
  --svc-color-operational-text-disabled: #8b8e95;
  --svc-color-operational-text-disabled-strong: #62656c;
  --svc-color-operational-text-emphasis: #30333a;
  --svc-color-operational-icon-disabled: #c7c7cc;
  --svc-color-operational-overdue: #ef352b;
  --svc-color-operational-danger: #ef4f34;
  --svc-color-operational-danger-strong: #b42318;
  --svc-color-operational-danger-surface-strong: #fee6e1;
  --svc-color-operational-danger-surface-hover: #fdd7cf;
  --svc-color-operational-warning-strong: #b54708;
  --svc-color-operational-slate: #344054;
  --svc-color-operational-success: var(--success-600);
  --svc-color-operational-brand: var(--blue-600);
  --svc-color-operational-focus: rgb(47 91 255 / 34%);
  --svc-color-operational-focus-strong: rgb(47 91 255 / 28%);
  --svc-color-timing-surface: #f1f1f4;
  --svc-color-operational-control-fill: #f1f1f3;
  --svc-color-timing-info: #0166dd;
  --svc-color-timing-info-surface: rgb(1 102 221 / 12%);
  --svc-color-inverse-muted: rgb(255 255 255 / 72%);
  --svc-color-inverse-fill: rgb(255 255 255 / 10%);
  --svc-color-inverse-80: rgb(255 255 255 / 80%);
  --svc-color-inverse-90: rgb(255 255 255 / 90%);
  --svc-color-inverse-92: rgb(255 255 255 / 92%);
  --svc-color-inverse-94: rgb(255 255 255 / 94%);
  --svc-color-inverse-96: rgb(255 255 255 / 96%);
  --svc-color-inverse-16: rgb(255 255 255 / 16%);
  --svc-color-inverse-62: rgb(255 255 255 / 62%);
  --svc-color-inverse-clear: rgb(255 255 255 / 0%);
  --svc-color-scrim: rgb(10 10 12 / 42%);
  --svc-color-scrim-soft: rgb(10 10 12 / 18%);
  --svc-color-scrim-clear: rgb(10 10 12 / 0%);
  --svc-color-brand-pressed: #1746df;

  /* Shape */
  --svc-radius-control: var(--radius);
  --svc-radius-badge: var(--radius-md);
  --svc-radius-card: var(--radius-xl);
  --svc-radius-sheet: var(--radius-2xl);
  --svc-radius-pill: var(--radius-full);
  --svc-radius-button: 14px;
  --svc-radius-field: 14px;
  --svc-radius-order-card: var(--radius-xl);
  --svc-radius-floating-bar: 18px;
  --svc-radius-dialog: 22px;
  --svc-radius-rail-item: var(--radius-lg);

  /* Component sizing */
  --svc-control-height-sm: 40px;
  --svc-control-height-md: 52px;
  --svc-control-height-lg: 56px;
  --svc-control-height-order-action: 64px;
  --svc-control-height-order-action-compact: 58px;
  --svc-rail-item-size: 74px;
  --svc-selection-target-size: 40px;
  --svc-notification-height: 64px;
  --svc-notification-action-height: 44px;
  --svc-badge-height: 28px;
  --svc-quantity-size: 34px;
  --svc-icon-sm: 16px;
  --svc-icon-md: 20px;
  --svc-icon-lg: 24px;
  --svc-search-width-collapsed: 240px;
  --svc-search-width-expanded: 520px;

  /* Layout */
  --svc-page-gutter: var(--space-10);
  --svc-section-gap: var(--space-8);
  --svc-card-padding: var(--space-6);
  --svc-order-card-inset: var(--space-6);
  --svc-order-card-gap: var(--space-5);
  --svc-order-action-gap: var(--space-3);
  --svc-toolbar-inset-block: var(--space-5);
  --svc-toolbar-inset-inline: var(--space-6);
  --svc-lane-gutter: var(--space-6);
  --svc-rail-width: 112px;

  /* Motion foundations */
  --svc-motion-duration-fast: 140ms;
  --svc-motion-duration-normal: 240ms;
  --svc-motion-duration-press: 90ms;
  --svc-motion-duration-popover-enter: 180ms;
  --svc-motion-duration-sheet-enter: 460ms;
  --svc-motion-duration-sheet-exit: 360ms;
  --svc-motion-duration-page-enter: 440ms;
  --svc-motion-duration-notification-enter: 300ms;
  --svc-motion-duration-notification-exit: 240ms;
  --svc-motion-ease-standard: cubic-bezier(.2, 0, .2, 1);
  --svc-motion-ease-enter: cubic-bezier(.22, 1, .36, 1);
  --svc-motion-ease-pop: cubic-bezier(.16, 1, .3, 1);
  --svc-motion-ease-exit: cubic-bezier(.4, 0, 1, 1);

  /* Motion roles */
  --svc-duration-fast: var(--svc-motion-duration-fast);
  --svc-duration-normal: var(--svc-motion-duration-normal);
  --svc-ease-standard: var(--svc-motion-ease-standard);
  --svc-ease-enter: var(--svc-motion-ease-enter);
  --svc-duration-press: var(--svc-motion-duration-press);
  --svc-duration-popover-enter: var(--svc-motion-duration-popover-enter);
  --svc-duration-sheet-enter: var(--svc-motion-duration-sheet-enter);
  --svc-duration-sheet-exit: var(--svc-motion-duration-sheet-exit);
  --svc-duration-page-enter: var(--svc-motion-duration-page-enter);
  --svc-duration-notification-enter: var(--svc-motion-duration-notification-enter);
  --svc-duration-notification-exit: var(--svc-motion-duration-notification-exit);
  --svc-ease-pop: var(--svc-motion-ease-pop);
  --svc-ease-exit: var(--svc-motion-ease-exit);

  /* Elevation */
  --svc-shadow-card: 0 1px 3px rgba(17, 17, 24, .02);
  --svc-shadow-sheet: 0 24px 80px rgba(10, 10, 12, .16);
  --svc-shadow-order-card: 0 1px 2px rgb(0 0 0 / 2.5%);
  --svc-shadow-order-card-hover: 0 5px 16px rgb(0 0 0 / 7%);
  --svc-shadow-floating-bar: 0 18px 44px rgb(16 24 40 / 24%);
  --svc-shadow-dialog: 0 24px 64px rgb(0 0 0 / 22%);
  --svc-shadow-side-sheet: -18px 0 52px rgb(0 0 0 / 16%);
  --svc-shadow-notification: 0 12px 30px rgb(0 0 0 / 20%);
  --svc-shadow-switch-knob: 0 1px 3px rgb(0 0 0 / 25%);

  /* Product layer ordering. */
  --svc-layer-content: 1;
  --svc-layer-sticky: 10;
  --svc-layer-floating: 30;
  --svc-layer-backdrop: 40;
  --svc-layer-sheet: 50;
  --svc-layer-dialog: 60;
  --svc-layer-toast: 100000;

  /* Component typography extracted from the order screens. */
  --svc-type-order-card-title-size: 20px;
  --svc-type-order-card-title-line-height: 26px;
  --svc-type-order-card-title-weight: var(--svc-font-weight-semibold);
  --svc-type-order-card-meta-size: 16px;
  --svc-type-order-card-meta-line-height: 22px;
  --svc-type-order-card-meta-weight: var(--svc-font-weight-regular);
  --svc-type-order-control-size: 17px;
  --svc-type-order-control-line-height: 24px;
  --svc-type-order-control-weight: var(--svc-font-weight-medium);
}

@media (max-width: 640px) {
  :root {
    --svc-page-gutter: var(--space-6);
  }
}

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