/* GENERATED by boilerplate-brand. Do not edit by hand.
   Source of truth: the boilerplate-brand repo, tokens/*.json and brand/logo/*.svg
   Regenerate with: npm run build */

:root {
  --color-surface: #F3F2F2;
  --color-surface-raised: #e6e5e5;
  --color-on-surface: #201E1D;
  --color-on-surface-muted: #454240;
  --color-border: #797471;
  --color-accent: #C22710;
  --color-on-accent: #F3F2F2;
  --color-danger: #95182D;
  --color-on-danger: #F3F2F2;
  --color-brand-mark: #EC3013;

  --type-family-sans: IBM Plex Sans, system-ui, sans-serif;
  --type-family-mono: IBM Plex Mono, ui-monospace, monospace;
  --type-weight-regular: 400;
  --type-weight-medium: 500;
  --type-weight-semibold: 600;
  --type-weight-bold: 700;
  --type-numeric-tabular: tabular-nums lining-nums;
  --type-scaling-max: 2.4;
  --type-scale-caption-size: 12px;
  --type-scale-caption-line-height: 1.4;
  --type-scale-body-size: 16px;
  --type-scale-body-line-height: 1.5;
  --type-scale-lead-size: 20px;
  --type-scale-lead-line-height: 1.4;
  --type-scale-h3-size: 25px;
  --type-scale-h3-line-height: 1.3;
  --type-scale-h2-size: 31px;
  --type-scale-h2-line-height: 1.25;
  --type-scale-h1-size: 39px;
  --type-scale-h1-line-height: 1.2;

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

  --radius-none: 0px;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-full: 9999px;

  --motion-duration-instant: 0ms;
  --motion-duration-fast: 120ms;
  --motion-duration-base: 240ms;
  --motion-duration-slow: 400ms;
  --motion-reduced-instant: 0ms;
  --motion-reduced-fast: 0ms;
  --motion-reduced-base: 0ms;
  --motion-reduced-slow: 0ms;
  --motion-reduced-crossfade: 160ms;
  --motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --motion-easing-enter: cubic-bezier(0, 0, 0, 1);
  --motion-easing-exit: cubic-bezier(0.3, 0, 1, 1);
}

[data-theme="dark"] {
  --color-surface: #201E1D;
  --color-surface-raised: #302d2c;
  --color-on-surface: #F3F2F2;
  --color-on-surface-muted: #b5b2b0;
  --color-border: #989390;
  --color-accent: #F16A55;
  --color-on-accent: #201E1D;
  --color-danger: #EA7B8E;
  --color-on-danger: #201E1D;
  --color-brand-mark: #EC3013;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-surface: #201E1D;
    --color-surface-raised: #302d2c;
    --color-on-surface: #F3F2F2;
    --color-on-surface-muted: #b5b2b0;
    --color-border: #989390;
    --color-accent: #F16A55;
    --color-on-accent: #201E1D;
    --color-danger: #EA7B8E;
    --color-on-danger: #201E1D;
    --color-brand-mark: #EC3013;
  }
}

/* Logo assets, inlined from brand/logo/*.svg. Use as a background:
   background-image: var(--logo-mark-red). Fabrication artwork is excluded. */
:root {
  --logo-icon-ink: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%20width%3D%22512%22%20height%3D%22512%22%3E%20%3Ctitle%3EBoilerplate%20app%20icon%3C%2Ftitle%3E%20%3Crect%20width%3D%2232%22%20height%3D%2232%22%20fill%3D%22%23201E1D%22%3E%3C%2Frect%3E%20%3Cpath%20fill%3D%22%23F3F2F2%22%20fill-rule%3D%22evenodd%22%20transform%3D%22translate(8%206)%22%20d%3D%22M0%200H12V4H16V16H12V20H0Z%20M4%204H12V8H4Z%20M4%2012H12V16H4Z%22%3E%3C%2Fpath%3E%20%3C%2Fsvg%3E");
  --logo-icon-red: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%20width%3D%22512%22%20height%3D%22512%22%3E%20%3Ctitle%3EBoilerplate%20app%20icon%3C%2Ftitle%3E%20%3Crect%20width%3D%2232%22%20height%3D%2232%22%20fill%3D%22%23EC3013%22%3E%3C%2Frect%3E%20%3Cpath%20fill%3D%22%23F3F2F2%22%20fill-rule%3D%22evenodd%22%20transform%3D%22translate(8%206)%22%20d%3D%22M0%200H12V4H16V16H12V20H0Z%20M4%204H12V8H4Z%20M4%2012H12V16H4Z%22%3E%3C%2Fpath%3E%20%3C%2Fsvg%3E");
  --logo-mark-ink: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2020%22%20width%3D%22160%22%20height%3D%22200%22%3E%20%3Ctitle%3EBoilerplate%3C%2Ftitle%3E%20%3Cpath%20fill%3D%22%23201E1D%22%20fill-rule%3D%22evenodd%22%20d%3D%22M0%200H12V4H16V16H12V20H0Z%20M4%204H12V8H4Z%20M4%2012H12V16H4Z%22%3E%3C%2Fpath%3E%20%3C%2Fsvg%3E");
  --logo-mark-red: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2020%22%20width%3D%22160%22%20height%3D%22200%22%3E%20%3Ctitle%3EBoilerplate%3C%2Ftitle%3E%20%3Cpath%20fill%3D%22%23EC3013%22%20fill-rule%3D%22evenodd%22%20d%3D%22M0%200H12V4H16V16H12V20H0Z%20M4%204H12V8H4Z%20M4%2012H12V16H4Z%22%3E%3C%2Fpath%3E%20%3C%2Fsvg%3E");
  --logo-mark-reversed: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2020%22%20width%3D%22160%22%20height%3D%22200%22%3E%20%3Ctitle%3EBoilerplate%3C%2Ftitle%3E%20%3Cpath%20fill%3D%22%23F3F2F2%22%20fill-rule%3D%22evenodd%22%20d%3D%22M0%200H12V4H16V16H12V20H0Z%20M4%204H12V8H4Z%20M4%2012H12V16H4Z%22%3E%3C%2Fpath%3E%20%3C%2Fsvg%3E");
}