/* GENERATED by design/build-tokens.mjs from design/crush.tokens.json — do not edit by hand.
 * MyHabibi · Crush theme for the owner portal and web.
 * Crush Day by default; Crush Night when the OS asks for dark, unless the page forces a theme with
 * <html data-theme="light"> or <html data-theme="dark">.
 * Fonts: Lexend (display), Lexend (body), Tajawal (Arabic). */
@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@300;400;500;600;700&family=Tajawal:wght@500;700;800&display=swap');

:root, [data-theme="light"] {
  color-scheme: light;
  --mh-bg: #F7F5FF;
  --mh-surface: #FFFFFF;
  --mh-surface-2: #EFE9FF;
  --mh-line: #E2DCF7;
  --mh-line-strong: #847CB0;
  --mh-text: #230F4E;
  --mh-text-muted: #5E5880;
  --mh-text-faint: #625C88;
  --mh-brand: #3929C7;
  --mh-brand-strong: #2A1C93;
  --mh-brand-text: #FFFFFF;
  --mh-brand-tint: #EFE9FF;
  --mh-brand-tint-text: #3929C7;
  --mh-heat: #C42A55;
  --mh-heat-text: #FFFFFF;
  --mh-heat-ink: #C42A55;
  --mh-heat-tint: #FCE3EA;
  --mh-heat-tint-text: #9A1B3E;
  --mh-lux: #E8B84A;
  --mh-lux-on: #3F2E06;
  --mh-lux-text: #7A5A10;
  --mh-lux-line: #A27614;
  --mh-lux-tint: #FBF0D4;
  --mh-lux-tint-text: #6B4E0C;
  --mh-good: #1A7346;
  --mh-good-tint: #E1F4E9;
  --mh-warn: #94570A;
  --mh-warn-tint: #FDF0DC;
  --mh-danger: #B8203A;
  --mh-danger-tint: #FCE4E7;
  --mh-focus: #3929C7;
  --mh-scrim: rgba(35,15,78,0.55);
  --mh-glow: rgba(196,42,85,0.18);
  --mh-on-photo: #FFFFFF;
  --mh-on-photo-muted: #E2DCF7;
  --mh-on-gradient: #FFFFFF;
  --mh-chart-1: #3929C7;
  --mh-chart-2: #C42A55;
  --mh-chart-3: #A27614;
  --mh-chart-4: #5E5880;
  --mh-gradient-brand: linear-gradient(135deg, #C42A55, #4B14AA);
  --mh-gradient-hero: linear-gradient(135deg, #EFE9FF, #F7F5FF);
  --mh-gradient-match: linear-gradient(135deg, #FCE3EA, #F7F5FF);
  --mh-font-display: 'Lexend', system-ui, sans-serif;
  --mh-font-body: 'Lexend', system-ui, sans-serif;
  --mh-font-arabic: 'Tajawal', 'Lexend', sans-serif;
  --mh-radius-sm: 10px;
  --mh-radius-md: 18px;
  --mh-radius-lg: 28px;
  --mh-radius-pill: 999px;
  --mh-space-xs: 4px;
  --mh-space-sm: 8px;
  --mh-space-md: 12px;
  --mh-space-lg: 16px;
  --mh-space-xl: 24px;
  --mh-space-xxl: 32px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --mh-bg: #1A0B3B;
    --mh-surface: #22104A;
    --mh-surface-2: #2A1458;
    --mh-line: #3A2470;
    --mh-line-strong: #8C86BE;
    --mh-text: #FFFFFF;
    --mh-text-muted: #C9C3EA;
    --mh-text-faint: #B9B3DA;
    --mh-brand: #B9AEF0;
    --mh-brand-strong: #D9D2F5;
    --mh-brand-text: #1A0B3B;
    --mh-brand-tint: #33196B;
    --mh-brand-tint-text: #D9D2F5;
    --mh-heat: #C42A55;
    --mh-heat-text: #FFFFFF;
    --mh-heat-ink: #FF8FA3;
    --mh-heat-tint: #4A1230;
    --mh-heat-tint-text: #FFB3C4;
    --mh-lux: #E8B84A;
    --mh-lux-on: #3F2E06;
    --mh-lux-text: #F5D996;
    --mh-lux-line: #E8B84A;
    --mh-lux-tint: #33270C;
    --mh-lux-tint-text: #F5D996;
    --mh-good: #5FD49A;
    --mh-good-tint: #12301F;
    --mh-warn: #F2B45A;
    --mh-warn-tint: #33240D;
    --mh-danger: #FF7A86;
    --mh-danger-tint: #3A1218;
    --mh-focus: #B9AEF0;
    --mh-scrim: rgba(18,6,43,0.7);
    --mh-glow: rgba(196,42,85,0.38);
    --mh-on-photo: #FFFFFF;
    --mh-on-photo-muted: #E2DCF7;
    --mh-on-gradient: #FFFFFF;
    --mh-chart-1: #B9AEF0;
    --mh-chart-2: #FF8FA3;
    --mh-chart-3: #E8B84A;
    --mh-chart-4: #C9C3EA;
    --mh-gradient-brand: linear-gradient(135deg, #C42A55, #4B14AA);
    --mh-gradient-hero: linear-gradient(135deg, #33196B, #1A0B3B);
    --mh-gradient-match: linear-gradient(135deg, #4B14AA, #1A0B3B);
  }
}

[data-theme="dark"] {
  color-scheme: dark;
  --mh-bg: #1A0B3B;
  --mh-surface: #22104A;
  --mh-surface-2: #2A1458;
  --mh-line: #3A2470;
  --mh-line-strong: #8C86BE;
  --mh-text: #FFFFFF;
  --mh-text-muted: #C9C3EA;
  --mh-text-faint: #B9B3DA;
  --mh-brand: #B9AEF0;
  --mh-brand-strong: #D9D2F5;
  --mh-brand-text: #1A0B3B;
  --mh-brand-tint: #33196B;
  --mh-brand-tint-text: #D9D2F5;
  --mh-heat: #C42A55;
  --mh-heat-text: #FFFFFF;
  --mh-heat-ink: #FF8FA3;
  --mh-heat-tint: #4A1230;
  --mh-heat-tint-text: #FFB3C4;
  --mh-lux: #E8B84A;
  --mh-lux-on: #3F2E06;
  --mh-lux-text: #F5D996;
  --mh-lux-line: #E8B84A;
  --mh-lux-tint: #33270C;
  --mh-lux-tint-text: #F5D996;
  --mh-good: #5FD49A;
  --mh-good-tint: #12301F;
  --mh-warn: #F2B45A;
  --mh-warn-tint: #33240D;
  --mh-danger: #FF7A86;
  --mh-danger-tint: #3A1218;
  --mh-focus: #B9AEF0;
  --mh-scrim: rgba(18,6,43,0.7);
  --mh-glow: rgba(196,42,85,0.38);
  --mh-on-photo: #FFFFFF;
  --mh-on-photo-muted: #E2DCF7;
  --mh-on-gradient: #FFFFFF;
  --mh-chart-1: #B9AEF0;
  --mh-chart-2: #FF8FA3;
  --mh-chart-3: #E8B84A;
  --mh-chart-4: #C9C3EA;
  --mh-gradient-brand: linear-gradient(135deg, #C42A55, #4B14AA);
  --mh-gradient-hero: linear-gradient(135deg, #33196B, #1A0B3B);
  --mh-gradient-match: linear-gradient(135deg, #4B14AA, #1A0B3B);
}

/* Base */
body { background: var(--mh-bg); color: var(--mh-text); font-family: var(--mh-font-body); }
:lang(ar), [dir="rtl"] { font-family: var(--mh-font-arabic); }
h1, h2, h3, .mh-display { font-family: var(--mh-font-display); }
:focus-visible { outline: 2px solid var(--mh-focus); outline-offset: 2px; }