/* D3 Bathrooms design tokens. Generated by design/tools/kit.py; edit there, not here. */
@layer tokens {
  :root {
    --color-teal: #14403F;
    --color-teal-deep: #0E2F2E;
    --color-ink: #13201F;
    --color-brass: #A9772A;
    --color-brass-light: #D2A85E;
    --color-porcelain: #F3F6F5;
    --color-white: #FFFFFF;
    --color-grout: #D3DAD8;
    --color-muted: #4C5B59;

    /* semantic roles, light theme */
    --surface: var(--color-porcelain);
    --surface-raised: var(--color-white);
    --text: var(--color-ink);
    --text-muted: var(--color-muted);
    --brand: var(--color-teal);
    --brand-hover: var(--color-teal-deep);
    --on-brand: var(--color-porcelain);
    --accent: var(--color-brass);
    --border: var(--color-grout);
    --focus: var(--color-brass);

    --font-display: 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;
    --font-text: Figtree, system-ui, -apple-system, 'Segoe UI', sans-serif;
    --step--1: 0.875rem;
    --step-0: 1.0625rem;
    --step-1: 1.375rem;
    --step-2: 1.75rem;
    --step-3: 2.375rem;
    --step-4: 3.25rem;
    --step-5: 4.5rem;
    --space-3xs: 0.25rem;
    --space-2xs: 0.5rem;
    --space-xs: 0.75rem;
    --space-s: 1rem;
    --space-m: 1.5rem;
    --space-l: 2rem;
    --space-xl: 3rem;
    --space-2xl: 4.5rem;
    --space-3xl: 6.5rem;
    --radius-s: 3px;
    --radius-m: 6px;
    --line-hair: 1px;
    --line-rule: 1.5px;
    --motion-fast: 150ms;
    --motion-base: 220ms;
    --ease: cubic-bezier(.2,.7,.2,1);
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      color-scheme: dark;
      --surface: #0F1A19;
      --surface-raised: #16302F;
      --text: var(--color-porcelain);
      --text-muted: #A9B8B5;
      --brand: var(--color-brass-light);
      --brand-hover: #E2C07F;
      --on-brand: var(--color-ink);
      --accent: var(--color-brass-light);
      --border: #2B4341;
      --focus: var(--color-brass-light);
    }
  }
  :root[data-theme="dark"] {
    color-scheme: dark;
    --surface: #0F1A19;
    --surface-raised: #16302F;
    --text: var(--color-porcelain);
    --text-muted: #A9B8B5;
    --brand: var(--color-brass-light);
    --brand-hover: #E2C07F;
    --on-brand: var(--color-ink);
    --accent: var(--color-brass-light);
    --border: #2B4341;
    --focus: var(--color-brass-light);
  }
}