/* One visual and motion spine for the Speedy Tires concept. */
:root {
  color-scheme: dark;
  --ink: #121719;
  --ink-deep: #0c1012;
  --surface: #1b2226;
  --surface-raised: #242d32;
  --line: #3a454b;
  --paper: #f4f3ef;
  --white: #ffffff;
  --paper-line: #d9dbd7;
  --text: #f6f7f5;
  --muted: #b6bfc1;
  --text-dark: #20282c;
  --muted-dark: #536169;
  --accent: #ce252b;
  --accent-hover: #a91b22;
  --accent-light: #ff6971;
  --accent-wash: #f9e5e3;
  --action-ink: var(--accent-light);
  --action-surface: color-mix(in srgb, var(--accent-light) 10%, var(--ink));
  --action-selected: var(--accent);
  --whatsapp: #136941;
  --whatsapp-hover: #0b5231;
  --whatsapp-light: #8fe2b6;
  --whatsapp-on-dark: #8fe2b6;
  --whatsapp-wash: #e7f4ec;
  --overlay: rgb(7 11 14 / 65%);
  --hero-shade: linear-gradient(90deg, rgb(9 14 17 / 98%) 0%, rgb(9 14 17 / 90%) 36%, rgb(9 14 17 / 74%) 72%, rgb(9 14 17 / 46%) 100%);
  --hero-shade-mobile: linear-gradient(90deg, rgb(9 14 17 / 94%), rgb(9 14 17 / 78%));
  --photo-shade: linear-gradient(0deg, rgb(7 11 14 / 90%) 0%, rgb(7 11 14 / 15%) 100%);
  --card-shade: linear-gradient(145deg, rgb(161 19 28 / 88%), rgb(9 14 17 / 82%));
  --shadow-dialog: 0 2rem 7rem rgb(0 0 0 / 35%);
  --body-font: 'Barlow', 'Barlow Fallback', sans-serif;
  --display-font: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --text-xs: .75rem;
  --text-sm: .875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --title-lg: clamp(2.5rem, 4.2vw, 3.875rem);
  --title-md: clamp(1.75rem, 2.3vw, 2.625rem);
  --hero-size: clamp(4.25rem, 7.4vw, 7.125rem);
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --section-space: clamp(4.5rem, 7vw, 7.25rem);
  --page-gutter: clamp(1.25rem, 4.5vw, 4rem);
  --wrap: 82rem;
  --rule: .0625rem;
  --header-height: 5rem;
  --preview-height: 1.875rem;
  --icon-size: 1.5rem;
  --radius-control: .125rem;
  --z-header: 30;
  --z-fab: 35;
  --z-status: 60;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --motion-press: 120ms;
  --motion-state: 250ms;
  --motion-image: 650ms;
  --motion-reveal: 650ms;
  --motion-stagger: 70ms;
  --motion-zero: 0ms;
}
:root[data-theme='light'] {
  color-scheme: light;
  --ink: #faf9f6;
  --ink-deep: #eeede8;
  --surface: #f0f1ed;
  --surface-raised: #ffffff;
  --line: #cdd3d3;
  --paper: #f2f3f0;
  --paper-line: #d4d9d6;
  --text: #182024;
  --muted: #4e5a60;
  --accent-light: #b91c25;
  --whatsapp-light: #12643f;
  --hero-shade: linear-gradient(90deg, rgb(250 249 246 / 100%) 0%, rgb(250 249 246 / 98%) 35%, rgb(250 249 246 / 84%) 58%, rgb(250 249 246 / 12%) 100%);
  --hero-shade-mobile: linear-gradient(90deg, rgb(250 249 246 / 97%), rgb(250 249 246 / 85%));
  --shadow-dialog: 0 2rem 7rem rgb(24 32 36 / 18%);
}
@media (max-width: 53.125rem) {
  :root { --header-height: 4.25rem; --hero-size: clamp(3.5rem, 10vw, 5.5rem); }
}
@media (prefers-reduced-motion: reduce) {
  :root { --motion-press: 0ms; --motion-state: 0ms; --motion-image: 0ms; --motion-reveal: 0ms; --motion-stagger: 0ms; }
}