/* Generated by scripts/build-css.py. Edit tokens/brand.tokens.json or re-export ui-theme/, then re-run.
   Fonts load separately: tokens/fonts.css. */

/* Brand palette and type roles: Merkevareguide 2025. Use these for anything that is not app UI. */
:root {
  --miles-red: #ff303b;
  --miles-burgundy: #450d21;
  --miles-cream: #fbf0e5;
  --miles-yellow: #ffd9a1;
  --miles-purple: #3d1436;
  --miles-white: #ffffff;
  --miles-red-90: #ff454f;
  --miles-red-80: #ff5a62;
  --miles-red-50: #ff979d;
  --miles-red-25: #ffcbce;
  --miles-purple-75: #6e4f68;
  --miles-purple-50: #9e8a9a;
  --miles-purple-20: #d8d0d7;
  --miles-font-display: "Gelica", "Georgia", serif;
  --miles-font-text: "DM Sans", sans-serif;
}

/* UI theme, light. From ui-theme/gui/themes/miles.md; what the names mean is in ui-theme/gui/foundations.md. */
:root {
  --theme-name: Miles;
  --theme-icon-family: Central;
  --theme-icon-style: outlined;
  --toolbar-divider-bleed: 0;
  --focus-ring-outline: initial;
  --icon-stroke-width: 2;
  --icon-light-display: none;
  --icon-regular-display: inline;
  --icon-bold-display: none;
  --motion-duration: 200ms;
  --motion-easing: cubic-bezier(0.16, 1, 0.3, 1);
  --motion-type: easing;
  --motion-visual-duration: 0.2;
  --motion-bounce: 0.2;
  --motion-enabled: 1;
  --motion-small-iterations: infinite;
  --motion-large-duration: 360ms;
  --motion-large-easing: cubic-bezier(0.22, 1, 0.36, 1);
  --motion-large-type: easing;
  --motion-large-visual-duration: 0.36;
  --motion-large-bounce: 0.2;
  --motion-large-iterations: infinite;
  --motion-popup-scale: 0.96;
  --motion-press-distance: 1px;
  --option-badge-background: #ff303b;
  --option-badge-foreground: #000000;
  --navigation-active-foreground: #000000;
  --emphasis-chart-fill: #ff303b33;
  --emphasis-balance-background: #cdb0b3;
  --emphasis-rewards-background: #f1e3da;
  --emphasis-icon-background: #f1e3da;
  --emphasis-icon-foreground: #3d1436;
  --emphasis-type-background: #f1e3da;
  --emphasis-type-foreground: #3d1436;
  --navigation-active-background: #ff303b;
  --surface-raised-image: none;
  --surface-raised-shadow: 0 0 0 0 transparent;
  --surface-recessed-image: none;
  --surface-recessed-shadow: 0 0 0 0 transparent;
  --space-zero: 0px;
  --space-xxs: 4px;
  --space-xs: 8px;
  --space-s: 12px;
  --space-m: 16px;
  --space-l: 24px;
  --space-xl: 32px;
  --space-xxl: 48px;
  --tracking-xs: -0.02em;
  --tracking-s: -0.01em;
  --tracking-m: 0em;
  --tracking-l: 0.01em;
  --tracking-xl: 0.02em;
  --size-xxs: 10px;
  --line-xxs: 14px;
  --letter-spacing-xxs: 0.02em;
  --size-xs: 12px;
  --line-xs: 16px;
  --letter-spacing-xs: 0.01em;
  --size-s: 14px;
  --line-s: 20px;
  --letter-spacing-s: 0.01em;
  --size-m: 16px;
  --line-m: 24px;
  --letter-spacing-m: 0em;
  --size-l: 24px;
  --line-l: 32px;
  --letter-spacing-l: -0.01em;
  --size-xl: 36px;
  --line-xl: 40px;
  --letter-spacing-xl: -0.01em;
  --size-xxl: 48px;
  --line-xxl: 52px;
  --letter-spacing-xxl: -0.02em;
  --radius-zero: 0px;
  --radius-xs: 4px;
  --radius-s: 8px;
  --radius-m: 12px;
  --radius-l: 18px;
  --radius-xl: 28px;
  --radius-full: 9999px;
  --border-none: 0px;
  --border-s: 0px;
  --border-m: 0px;
  --border-l: 0px;
  --border-default-color: #e4d0cb33;
  --border-shadow-none: 0 0 0 0 transparent;
  --border-shadow-s: 0 0 0 0 transparent;
  --border-shadow-m: 0 0 0 0 transparent;
  --border-shadow-l: 0 0 0 0 transparent;
  --font-ui: "DM Sans", sans-serif;
  --weight-ui-regular: 400;
  --weight-ui-medium: 500;
  --weight-ui-heavy: 600;
  --font-brand: Gelica, Georgia, serif;
  --weight-brand-regular: 400;
  --weight-brand-medium: 500;
  --weight-brand-heavy: 500;
  --font-editorial: "DM Sans", sans-serif;
  --weight-editorial-regular: 400;
  --weight-editorial-medium: 500;
  --weight-editorial-heavy: 600;
  --font-data: "DM Sans", sans-serif;
  --weight-data-regular: 400;
  --weight-data-medium: 500;
  --weight-data-heavy: 600;
  --color-none: transparent;
  --color-1: #ff303b;
  --color-1-transparent: #ff303b33;
  --color-2: #450d21;
  --color-2-transparent: #450d2133;
  --color-3: #ffd9a1;
  --color-3-transparent: #ffd9a133;
  --color-4: #fbf0e5;
  --color-4-transparent: #fbf0e533;
  --color-5: #3d1436;
  --color-5-transparent: #3d143633;
  --neutral-1: #fffaf5;
  --neutral-1-transparent: #fffaf533;
  --neutral-2: #fbf0e5;
  --neutral-2-transparent: #fbf0e533;
  --neutral-3: #f1e3da;
  --neutral-3-transparent: #f1e3da33;
  --neutral-4: #e4d0cb;
  --neutral-4-transparent: #e4d0cb33;
  --neutral-5: #cdb0b3;
  --neutral-5-transparent: #cdb0b333;
  --neutral-6: #a6818a;
  --neutral-6-transparent: #a6818a33;
  --neutral-7: #805b69;
  --neutral-7-transparent: #805b6933;
  --neutral-8: #633548;
  --neutral-8-transparent: #63354833;
  --neutral-9: #450d21;
  --neutral-9-transparent: #450d2133;
  --neutral-10: #3d1436;
  --neutral-10-transparent: #3d143633;
  --success: #00906c;
  --success-transparent: #00906c33;
  --warning: #ffd9a1;
  --warning-transparent: #ffd9a133;
  --error: #ff303b;
  --error-transparent: #ff303b33;
  --shadow-none: none;
  --shadow-s: 0px 2px 4px 0px #3d143600;
  --shadow-m: 0px 2px 6px 0px #3d14360d, 0px 8px 24px 0px #3d143613;
  --shadow-l: 0px 16px 48px 0px #3d143600;
  --cte-canvas: #fffaf5;
  --cte-surface: #fbf0e5;
  --cte-surface-muted: #f1e3da;
  --cte-text: #3d1436;
  --cte-text-muted: #805b69;
  --cte-border: #e4d0cb33;
  --cte-accent: #ff303b;
  --cte-accent-text: #000000;
  --cte-danger: #ff303b;
  --cte-focus: #ff303b;
  --cte-font: "DM Sans", sans-serif;
  --cte-font-size: 14px;
  --cte-font-weight: 400;
  --cte-line-height: 20px;
  --cte-letter-spacing: 0.01em;
  --cte-detail-font-size: 12px;
  --cte-detail-line-height: 16px;
  --cte-detail-letter-spacing: 0.01em;
}

/* UI theme, dark: only the variables that differ. Set data-theme="dark" on a root element, or map
   this block to the app's own mode switch. */
[data-theme="dark"] {
  --emphasis-balance-background: #70465c;
  --emphasis-rewards-background: #3d1436;
  --emphasis-icon-background: #3d1436;
  --emphasis-icon-foreground: #fffaf5;
  --emphasis-type-background: #3d1436;
  --emphasis-type-foreground: #fffaf5;
  --border-default-color: #542b4333;
  --neutral-1: #210d1b;
  --neutral-1-transparent: #210d1b33;
  --neutral-2: #301225;
  --neutral-2-transparent: #30122533;
  --neutral-3: #3d1436;
  --neutral-3-transparent: #3d143633;
  --neutral-4: #542b43;
  --neutral-4-transparent: #542b4333;
  --neutral-5: #70465c;
  --neutral-5-transparent: #70465c33;
  --neutral-6: #997387;
  --neutral-6-transparent: #99738733;
  --neutral-7: #be9fae;
  --neutral-7-transparent: #be9fae33;
  --neutral-8: #dfc7cf;
  --neutral-8-transparent: #dfc7cf33;
  --neutral-9: #fbf0e5;
  --neutral-9-transparent: #fbf0e533;
  --neutral-10: #fffaf5;
  --neutral-10-transparent: #fffaf533;
  --shadow-s: 0px 2px 4px 0px #210d1b00;
  --shadow-m: 0px 2px 6px 0px #210d1b0d, 0px 8px 24px 0px #210d1b13;
  --shadow-l: 0px 16px 48px 0px #210d1b00;
  --cte-canvas: #210d1b;
  --cte-surface: #301225;
  --cte-surface-muted: #3d1436;
  --cte-text: #fffaf5;
  --cte-text-muted: #be9fae;
  --cte-border: #542b4333;
}