/* Material Lab public storefront tokens. See ../DESIGN-SYSTEM.md. */
:root {
  /* Brand colors from the existing shared web shell and official identity. */
  --ml-color-brand-orange: #ff5600;
  --ml-color-brand-orange-end: #ff8b12;
  --ml-color-accent: var(--brand-orange, #f4540a);
  --ml-color-accent-strong: #a93600;
  --ml-color-ink: var(--brand-ink, #191817);
  --ml-color-paper: var(--brand-paper, #faf8f4);
  --ml-color-muted: var(--brand-muted, #5d5955);
  --ml-color-line: var(--brand-line, #d9d5ce);
  --ml-color-canvas: #f4f3f1;
  --ml-color-surface: #fffdf8;
  --ml-color-surface-subtle: #eae7de;
  --ml-color-surface-hover: #e9e5dc;
  --ml-color-surface-dark: #1c1c1c;
  --ml-color-text: #34322f;
  --ml-color-text-secondary: #625a4f;
  --ml-color-disabled: #77746e;

  --ml-font-family: Manrope, Arial, sans-serif;
  --ml-content-max: 1320px;

  --ml-space-1: 4px;
  --ml-space-2: 8px;
  --ml-space-3: 12px;
  --ml-space-4: 16px;
  --ml-space-6: 24px;
  --ml-space-8: 32px;
  --ml-space-12: 48px;
  --ml-space-16: 64px;

  --ml-radius-control: 4px;
  --ml-radius-button: 12px;
  --ml-radius-media: 10px;
  --ml-radius-card: 18px;

  --ml-motion-duration: 220ms;
  --ml-motion-easing: cubic-bezier(.16, 1, .3, 1);
}