/*
 * Generated by design/tokens/scripts/build.ts from design/tokens/tokens.
 * Do not edit. Change a token file, then run: npm run tokens
 */

:root {
  --mf-color-accent-default: #d84315;
  --mf-color-accent-gradient-end: #ff6b3d;
  --mf-color-accent-subtle: rgba(255, 70, 13, 0.1);
  --mf-color-action-focus-ring: rgba(255, 70, 13, 0.2);
  --mf-color-action-primary: #ff460d;
  --mf-color-action-primary-hover: #e63e0c;
  --mf-color-border-default: #e5e5e5;
  --mf-color-border-subtle: rgba(0, 0, 0, 0.06);
  --mf-color-highlight-search: rgba(255, 200, 0, 0.3);
  --mf-color-overlay-default: rgba(0, 0, 0, 0.5);
  --mf-color-overlay-strong: rgba(0, 0, 0, 0.7);
  --mf-color-shadow-default: rgba(0, 0, 0, 0.1);
  --mf-color-shadow-heavy: rgba(0, 0, 0, 0.3);
  --mf-color-shadow-medium: rgba(0, 0, 0, 0.2);
  --mf-color-shadow-soft: rgba(0, 0, 0, 0.1);
  --mf-color-shadow-strong: rgba(0, 0, 0, 0.25);
  --mf-color-status-danger: #ef4444;
  --mf-color-status-danger-on-accent: #fca5a5;
  --mf-color-status-danger-surface: rgba(239, 68, 68, 0.1);
  --mf-color-status-success: #22c55e;
  --mf-color-surface-card: #ffffff;
  --mf-color-surface-hover: rgba(0, 0, 0, 0.05);
  --mf-color-surface-input: rgba(0, 0, 0, 0.06);
  --mf-color-surface-page: #f5f5f7;
  --mf-color-surface-raised: #ebebed;
  --mf-color-surface-table-header: #f5f5f7;
  --mf-color-surface-tag: rgba(0, 0, 0, 0.06);
  --mf-color-text-on-action: #ffffff;
  --mf-color-text-primary: #1d1d1d;
  --mf-color-text-secondary: #1e293b;
  --mf-color-text-tag: rgba(0, 0, 0, 0.7);
  --mf-color-text-tertiary: rgba(0, 0, 0, 0.45);
  --mf-component-auth-divider-text: #666666;
  --mf-component-email-badge: #e8e8e8;
  --mf-component-email-border: #e5e5e5;
  --mf-component-email-brand: #333333;
  --mf-component-email-button: #000000;
  --mf-component-email-button-text: #ffffff;
  --mf-component-email-card: #fafafa;
  --mf-component-email-page: #ffffff;
  --mf-component-email-panel: #f0f0f0;
  --mf-component-email-tag-architecture-border: #a3a3b8;
  --mf-component-email-tag-architecture-text: #6b6b82;
  --mf-component-email-tag-art-design-border: #cc89ab;
  --mf-component-email-tag-art-design-text: #9c3e6e;
  --mf-component-email-tag-culture-border: #8bb87d;
  --mf-component-email-tag-culture-text: #4a7d3e;
  --mf-component-email-tag-current-affairs-border: #d9907f;
  --mf-component-email-tag-current-affairs-text: #b5432a;
  --mf-component-email-tag-fallback-border: #bbbbbb;
  --mf-component-email-tag-fallback-text: #777777;
  --mf-component-email-tag-fashion-border: #e09aa8;
  --mf-component-email-tag-fashion-text: #c44d63;
  --mf-component-email-tag-food-drink-border: #deb06e;
  --mf-component-email-tag-food-drink-text: #a86520;
  --mf-component-email-tag-lifestyle-border: #c9a87a;
  --mf-component-email-tag-lifestyle-text: #8c6b46;
  --mf-component-email-tag-literature-border: #a988c0;
  --mf-component-email-tag-literature-text: #6e4b8b;
  --mf-component-email-tag-music-border: #e5b37a;
  --mf-component-email-tag-music-text: #b87230;
  --mf-component-email-tag-photography-border: #a0a0a0;
  --mf-component-email-tag-photography-text: #555555;
  --mf-component-email-tag-science-border: #74b0d1;
  --mf-component-email-tag-science-text: #2a739b;
  --mf-component-email-tag-surface: #ffffff;
  --mf-component-email-tag-travel-border: #7dbfa6;
  --mf-component-email-tag-travel-text: #2d7d5f;
  --mf-component-email-text: #000000;
  --mf-component-email-text-secondary: #666666;
  --mf-component-email-text-tertiary: #999999;
  --mf-component-google-button-surface: #ffffff;
  --mf-component-google-button-text: #333333;
  --mf-component-landing-border: #e0ddd8;
  --mf-component-landing-header: #ffffff;
  --mf-component-landing-link: #3d4f65;
  --mf-component-landing-page: #f5f4f1;
  --mf-component-newsletter-highlight-button: rgba(0, 0, 0, 0.3);
  --mf-component-newsletter-highlight-button-hover: rgba(0, 0, 0, 0.4);
  --mf-component-newsletter-highlight-icon-surface: rgba(255, 255, 255, 0.2);
  --mf-component-newsletter-highlight-input-surface: #ffffff;
  --mf-component-newsletter-highlight-text-muted: rgba(255, 255, 255, 0.9);
  --mf-component-newsletter-preview-swatch1-end: #764ba2;
  --mf-component-newsletter-preview-swatch1-start: #667eea;
  --mf-component-newsletter-preview-swatch2-end: #f5576c;
  --mf-component-newsletter-preview-swatch2-start: #f093fb;
  --mf-component-newsletter-preview-swatch3-end: #00f2fe;
  --mf-component-newsletter-preview-swatch3-start: #4facfe;
  --mf-component-newsletter-preview-swatch4-end: #38f9d7;
  --mf-component-newsletter-preview-swatch4-start: #43e97b;
  --mf-component-newsletter-preview-swatch5-end: #fee140;
  --mf-component-newsletter-preview-swatch5-start: #fa709a;
  --mf-component-phone-mock-avatar: #d84315;
  --mf-component-phone-mock-bar: #f6f6f6;
  --mf-component-phone-mock-frame: #000000;
  --mf-component-phone-mock-link: #007aff;
  --mf-component-phone-mock-on-avatar: #ffffff;
  --mf-component-phone-mock-screen: #ffffff;
  --mf-component-phone-mock-secondary-text: #8e8e93;
  --mf-component-phone-mock-separator: #c6c6c8;
  --mf-component-phone-mock-text: #000000;
  --mf-component-toast-surface: #1d1d1d;
  --mf-component-toast-text: #ffffff;
  --mf-component-toggle-knob: #ffffff;
  --mf-component-type-badge-article-surface: rgba(59, 130, 246, 0.1);
  --mf-component-type-badge-article-text: #3b82f6;
  --mf-component-type-badge-gallery-surface: rgba(168, 85, 247, 0.1);
  --mf-component-type-badge-gallery-text: #a855f7;
  --mf-component-type-badge-image-alt-surface: rgba(216, 67, 21, 0.1);
  --mf-component-type-badge-image-row-tint: rgba(216, 67, 21, 0.03);
  --mf-component-type-badge-image-row-tint-hover: rgba(216, 67, 21, 0.06);
  --mf-component-type-badge-image-surface: rgba(34, 197, 94, 0.1);
  --mf-component-type-badge-image-text: #22c55e;
  --mf-component-type-badge-podcast-alt-surface: rgba(168, 85, 247, 0.1);
  --mf-component-type-badge-podcast-alt-text: #a855f7;
  --mf-component-type-badge-podcast-surface: rgba(249, 115, 22, 0.1);
  --mf-component-type-badge-podcast-text: #f97316;
  --mf-component-type-badge-video-surface: rgba(239, 68, 68, 0.1);
  --mf-component-type-badge-video-text: #ef4444;
  --mf-duration-100: 0.1s;
  --mf-duration-150: 0.15s;
  --mf-duration-200: 0.2s;
  --mf-duration-300: 0.3s;
  --mf-duration-800: 0.8s;
  --mf-duration-1500: 1.5s;
  --mf-font-family-email: Inter, 'SF Pro Display', -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
  --mf-font-family-system: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', 'Segoe UI', Roboto, sans-serif;
  --mf-font-family-system-page: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', 'Helvetica Neue', sans-serif;
  --mf-font-size-10: 10px;
  --mf-font-size-11: 11px;
  --mf-font-size-12: 12px;
  --mf-font-size-13: 13px;
  --mf-font-size-14: 14px;
  --mf-font-size-15: 15px;
  --mf-font-size-16: 16px;
  --mf-font-size-17: 17px;
  --mf-font-size-18: 18px;
  --mf-font-size-20: 20px;
  --mf-font-size-22: 22px;
  --mf-font-size-24: 24px;
  --mf-font-size-28: 28px;
  --mf-font-size-32: 32px;
  --mf-font-size-42: 42px;
  --mf-font-size-44: 44px;
  --mf-font-size-rem875: 0.875rem;
  --mf-font-weight-bold: 700;
  --mf-font-weight-medium: 500;
  --mf-font-weight-regular: 400;
  --mf-font-weight-semibold: 600;
  --mf-letter-spacing-display: -0.03em;
  --mf-letter-spacing-email-display: -0.04em;
  --mf-letter-spacing-email-heading: -0.02em;
  --mf-letter-spacing-snug: -0.3px;
  --mf-letter-spacing-tight: -0.5px;
  --mf-letter-spacing-wide: 0.5px;
  --mf-line-height-110: 1.1;
  --mf-line-height-112: 1.12;
  --mf-line-height-130: 1.3;
  --mf-line-height-140: 1.4;
  --mf-line-height-150: 1.5;
  --mf-line-height-160: 1.6;
  --mf-line-height-170: 1.7;
  --mf-opacity-30: 0.3;
  --mf-opacity-60: 0.6;
  --mf-opacity-80: 0.8;
  --mf-opacity-90: 0.9;
  --mf-radius-0: 0;
  --mf-radius-2: 2px;
  --mf-radius-3: 3px;
  --mf-radius-4: 4px;
  --mf-radius-6: 6px;
  --mf-radius-8: 8px;
  --mf-radius-10: 10px;
  --mf-radius-12: 12px;
  --mf-radius-20: 20px;
  --mf-radius-24: 24px;
  --mf-radius-32: 32px;
  --mf-radius-38: 38px;
  --mf-radius-42: 42px;
  --mf-radius-48: 48px;
  --mf-radius-circle: 50%;
  --mf-radius-full: 9999px;
  --mf-shadow-card: 0 4px 12px var(--mf-color-shadow-default);
  --mf-shadow-cover: 0 1px 2px var(--mf-color-shadow-soft);
  --mf-shadow-focus: 0 0 0 2px var(--mf-color-action-focus-ring);
  --mf-shadow-knob: 0 1px 3px var(--mf-color-shadow-medium);
  --mf-shadow-menu: 0 4px 24px var(--mf-color-shadow-default), 0 0 0 1px var(--mf-color-border-subtle);
  --mf-shadow-modal: 0 8px 32px var(--mf-color-shadow-default);
  --mf-shadow-phone: 0 20px 60px var(--mf-color-shadow-medium);
  --mf-shadow-preview: 0 16px 48px var(--mf-color-shadow-heavy);
  --mf-shadow-raised: 0 8px 24px var(--mf-color-shadow-default);
  --mf-shadow-search: 0 25px 50px -12px var(--mf-color-shadow-strong);
  --mf-space-0: 0;
  --mf-space-1: 1px;
  --mf-space-2: 2px;
  --mf-space-4: 4px;
  --mf-space-6: 6px;
  --mf-space-8: 8px;
  --mf-space-10: 10px;
  --mf-space-12: 12px;
  --mf-space-14: 14px;
  --mf-space-16: 16px;
  --mf-space-18: 18px;
  --mf-space-20: 20px;
  --mf-space-24: 24px;
  --mf-space-28: 28px;
  --mf-space-32: 32px;
  --mf-space-36: 36px;
  --mf-space-40: 40px;
  --mf-space-42: 42px;
  --mf-space-48: 48px;
  --mf-space-52: 52px;
  --mf-space-56: 56px;
  --mf-space-60: 60px;
  --mf-space-64: 64px;
  --mf-space-72: 72px;
  --mf-space-80: 80px;
  --mf-space-rem1: 1rem;
  --mf-space-rem2: 2rem;
  --mf-stroke-1: 1px;
  --mf-stroke-2: 2px;
  --mf-stroke-hairline: 0.5px;
  --mf-z-index-auth-modal: 300;
  --mf-z-index-control: 10;
  --mf-z-index-menu: 200;
  --mf-z-index-mobile-menu: 1000;
  --mf-z-index-mobile-menu-button: 1001;
  --mf-z-index-popup: 10000;
  --mf-z-index-preview-modal: 400;
  --mf-z-index-raised: 2;
  --mf-z-index-search: 9999;
  --mf-z-index-toast: 1000;
}

:root[data-theme="dark"] {
  --mf-color-border-default: rgba(255, 255, 255, 0.1);
  --mf-color-border-subtle: rgba(255, 255, 255, 0.06);
  --mf-color-shadow-default: rgba(0, 0, 0, 0.4);
  --mf-color-surface-card: #1c1c1e;
  --mf-color-surface-hover: rgba(255, 255, 255, 0.05);
  --mf-color-surface-input: rgba(255, 255, 255, 0.1);
  --mf-color-surface-page: #000000;
  --mf-color-surface-raised: #2c2c2e;
  --mf-color-surface-table-header: #2c2c2e;
  --mf-color-surface-tag: rgba(255, 255, 255, 0.1);
  --mf-color-text-primary: #ffffff;
  --mf-color-text-secondary: rgba(255, 255, 255, 0.55);
  --mf-color-text-tag: rgba(255, 255, 255, 0.7);
  --mf-color-text-tertiary: rgba(255, 255, 255, 0.45);
  --mf-component-toast-surface: #ffffff;
  --mf-component-toast-text: #1d1d1d;
}