/* Laundry Turtle tokens as CSS custom properties, transcribed from the design system's tokens.json (version 1792556036-a743).
   components/bundle.css reads every value from these names. */
:root {
  /* Palette */
  --green-900: #083716;
  --green-700: #1b7e3e;
  --green-500: #2dbe60;
  --lime-400: #78c46b;
  --lime-300: #b0d462;
  --amber-500: #f5a623;
  --amber-600: #e8981e;
  --cream-50: #fcfaf7;
  --cream-100: #faf8f5;
  --cream-200: #f4efe8;
  --taupe-200: #e0dad3;
  --white: #ffffff;
  --grey-100: #e0e0e0;
  --grey-300: #c5c5c5;
  --grey-500: #757575;
  --grey-700: #4f4f4f;
  --charcoal: #333333;
  --black: #121212;
  --hairline: #d4d4d4;
  --swatch-green: #05aa3d;
  --swatch-light-blue: #acd7e8;
  --swatch-grey: #797979;
  --swatch-purple: #ad82b9;

  /* Roles */
  --page: var(--cream-200);
  --surface: var(--white);
  --surface-sunken: var(--taupe-200);
  --ink: var(--green-900);
  --ink-muted: var(--grey-700);
  --brand: var(--green-700);
  --on-brand: var(--white);
  --action: var(--amber-500);
  --action-hover: var(--amber-600);
  --on-action: var(--green-900);
  --star: var(--amber-500);
  --star-empty: var(--grey-300);
  --savings: var(--green-700);
  --line-strong: var(--grey-500);
  --focus-ring: var(--green-900);
  --focus-ring-on-dark: var(--white);
  --disabled-fill: var(--grey-100);
  --disabled-ink: var(--grey-700);

  /* Type */
  --font-display: "Fira Sans", system-ui, sans-serif;
  --font-body: Exo, system-ui, sans-serif;
  --fs-display-m: 36px;
  --fs-display-d: 64px;
  --fs-h2-m: 32px;
  --fs-h2-d: 48px;
  --fs-h3-m: 24px;
  --fs-h3-d: 40px;
  --fs-h4-m: 20px;
  --fs-h4-d: 24px;
  --fs-card-m: 18px;
  --fs-card-d: 21px;
  --fs-lead-m: 18px;
  --fs-lead-d: 24px;
  --fs-hero-lead-m: 16px;
  --fs-hero-lead-d: 20px;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* Radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 28px;
  --radius-pill: 999px;
  --radius-round: 50%;

  /* Shadow */
  --shadow-sticky: 0 -4px 16px rgba(8, 55, 22, 0.12);

  /* Layout */
  --breakpoint-desktop: 750px;
  --container-max: 1340px;
  --gutter-m: 16px;
  --gutter-d: 50px;
  --tap-min: 48px;
  --button-h-m: 52px;
  --button-h-d: 56px;
  --swatch-size: 32px;
  --icon-size: 30px;
  --sticky-bar-h: 76px;
}