/* HarleyMobile 4.0 Design-Tokens. Generiert aus tokens.json, nicht von Hand aendern. */
:root {
  color-scheme: dark light;
  --hm-bg: #0B0B0C;
  --hm-surface: #151517;
  --hm-surface-raised: #1E1E21;
  --hm-separator: #2E2D30;
  --hm-text-primary: #F4F0E8;
  --hm-text-secondary: #ADA79E;
  --hm-text-tertiary: #7F786E;
  --hm-accent: #F26A1B;
  --hm-accent-pressed: #D85A10;
  --hm-on-accent: #0B0B0C;
  --hm-accent-text: #F26A1B;
  --hm-accent-subtle: #2A1A10;
  --hm-success: #46B07A;
  --hm-warning: #F0B73F;
  --hm-error: #F2555A;
  --hm-info: #5AA9E6;
  --hm-ad-surface: #121214;
  --hm-ad-label: #ADA79E;
  --hm-scrim-strong: rgba(11,11,12,0.82);
  --hm-scrim-soft: rgba(11,11,12,0);
  --hm-space-0: 0px;
  --hm-space-1: 2px;
  --hm-space-2: 4px;
  --hm-space-3: 8px;
  --hm-space-4: 12px;
  --hm-space-5: 16px;
  --hm-space-6: 20px;
  --hm-space-7: 24px;
  --hm-space-8: 32px;
  --hm-space-9: 40px;
  --hm-space-10: 48px;
  --hm-space-11: 64px;
  --hm-space-12: 80px;
  --hm-space-13: 96px;
  --hm-radius-xs: 4px;
  --hm-radius-sm: 8px;
  --hm-radius-md: 12px;
  --hm-radius-lg: 16px;
  --hm-radius-xl: 24px;
  --hm-radius-pill: 999px;
  --hm-shadow-sm: 0 1px 2px rgba(0,0,0,0.40);
  --hm-shadow-md: 0 6px 18px rgba(0,0,0,0.45);
  --hm-shadow-lg: 0 16px 40px rgba(0,0,0,0.55);
  --hm-font-display: 'Archivo', Saira, Arial Black, sans-serif;
  --hm-font-ui: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --hm-text-display-size: clamp(2.5rem, 1.2rem + 5.5vw, 5.5rem);
  --hm-text-display-line: 0.98;
  --hm-text-h1-size: clamp(2rem, 1.2rem + 3vw, 3.25rem);
  --hm-text-h1-line: 1.05;
  --hm-text-h2-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
  --hm-text-h2-line: 1.1;
  --hm-text-h3-size: 1.25rem;
  --hm-text-h3-line: 1.3;
  --hm-text-lead-size: clamp(1.125rem, 1rem + 0.4vw, 1.3125rem);
  --hm-text-lead-line: 1.5;
  --hm-text-body-size: 1.0625rem;
  --hm-text-body-line: 1.6;
  --hm-text-small-size: 0.875rem;
  --hm-text-small-line: 1.5;
  --hm-text-label-size: 0.75rem;
  --hm-text-label-line: 1.2;
  --hm-duration-fast: 120ms;
  --hm-duration-base: 200ms;
  --hm-duration-slow: 320ms;
  --hm-easing: cubic-bezier(0.2, 0, 0, 1);
  --hm-scrim: linear-gradient(180deg, rgba(11,11,12,0) 40%, rgba(11,11,12,0.82) 100%);
  --hm-content-max: 1200px;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --hm-bg: #F6F1E8;
    --hm-surface: #FBF8F2;
    --hm-surface-raised: #ECE5D8;
    --hm-separator: #D9CFBF;
    --hm-text-primary: #1B1916;
    --hm-text-secondary: #5C564E;
    --hm-text-tertiary: #7F786E;
    --hm-accent: #B84A06;
    --hm-accent-pressed: #9C3E05;
    --hm-on-accent: #FFFFFF;
    --hm-accent-text: #B84A06;
    --hm-accent-subtle: #F6E1D2;
    --hm-success: #1E6B42;
    --hm-warning: #8A5A00;
    --hm-error: #BC2F27;
    --hm-info: #1F5F99;
    --hm-ad-surface: #EFE9DE;
    --hm-ad-label: #5C564E;
    --hm-scrim-strong: rgba(11,11,12,0.82);
    --hm-scrim-soft: rgba(11,11,12,0);
    --hm-shadow-sm: 0 1px 2px rgba(27,25,22,0.08);
    --hm-shadow-md: 0 6px 18px rgba(27,25,22,0.10);
    --hm-shadow-lg: 0 16px 40px rgba(27,25,22,0.14);
  }
}

:root[data-theme="light"] {
  --hm-bg: #F6F1E8;
  --hm-surface: #FBF8F2;
  --hm-surface-raised: #ECE5D8;
  --hm-separator: #D9CFBF;
  --hm-text-primary: #1B1916;
  --hm-text-secondary: #5C564E;
  --hm-text-tertiary: #7F786E;
  --hm-accent: #B84A06;
  --hm-accent-pressed: #9C3E05;
  --hm-on-accent: #FFFFFF;
  --hm-accent-text: #B84A06;
  --hm-accent-subtle: #F6E1D2;
  --hm-success: #1E6B42;
  --hm-warning: #8A5A00;
  --hm-error: #BC2F27;
  --hm-info: #1F5F99;
  --hm-ad-surface: #EFE9DE;
  --hm-ad-label: #5C564E;
  --hm-scrim-strong: rgba(11,11,12,0.82);
  --hm-scrim-soft: rgba(11,11,12,0);
  --hm-shadow-sm: 0 1px 2px rgba(27,25,22,0.08);
  --hm-shadow-md: 0 6px 18px rgba(27,25,22,0.10);
  --hm-shadow-lg: 0 16px 40px rgba(27,25,22,0.14);
}

.hm-display, .hm-h1, .hm-h2, .hm-label {
  font-family: var(--hm-font-display);
  font-stretch: 125%;
  text-transform: uppercase;
}
.hm-display { font-size: var(--hm-text-display-size); line-height: var(--hm-text-display-line); font-weight: 800; }
.hm-h1 { font-size: var(--hm-text-h1-size); line-height: var(--hm-text-h1-line); font-weight: 800; }
.hm-h2 { font-size: var(--hm-text-h2-size); line-height: var(--hm-text-h2-line); font-weight: 800; }
.hm-label { font-size: var(--hm-text-label-size); line-height: var(--hm-text-label-line); font-weight: 700; letter-spacing: 0.08em; }
@media (prefers-reduced-motion: reduce) { :root { --hm-duration-fast: 0ms; --hm-duration-base: 0ms; --hm-duration-slow: 0ms; } }