/* Design tokens: the only place raw colors, sizes and easings are defined.
   Brand values come from DESIGN.md. Floormart: heritage purple, orange spark, warm paper. */
:root {
  /* Color */
  --color-bg: #fbfaf8;
  --color-surface: #efe8f6;
  --color-surface-raised: #fff;
  --color-text: #201828;
  --color-text-muted: #6b6275;
  --color-border: #e4dde9;
  --color-primary: #4b2170;
  --color-primary-hover: #642e8c;
  --color-primary-contrast: #fff;
  --color-accent: #ff9800;
  --color-accent-contrast: #201828;
  --color-ink: #160f1d;
  --color-on-dark-muted: #cfc4dc;
  --color-focus: #ff9800;
  --color-stain: #3a1f0c;
  --color-carpet: #cdbba8;
  --home2-title: clamp(3rem, 5.3vw, 5rem);
  --home2-heading: clamp(2rem, 3.6vw, 3.5rem);
  --home2-hero-height: 36rem;
  --home2-photo-mobile: 22rem;
  --home2-header-bg: rgb(255 255 255 / 94%);
  --home3-title: clamp(2.6rem, 4.6vw, 4.5rem);
  --home3-heading: clamp(2rem, 3.5vw, 3.5rem);
  --home3-hero-height: 39rem;
  --home3-project-width: 30rem;

  /* Floor materials used by the room planner */
  --color-mat-oak: #b98550;
  --color-mat-vinyl: #a4a2ac;
  --color-mat-tile: #ddd8d0;
  --color-mat-carpet: #8d6aab;

  /* Type */
  --font-body: manrope, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-accent: newsreader, georgia, serif;
  --font-display: var(--font-body);
  --text-xs: 0.75rem;
  --text-sm: clamp(0.875rem, 0.85rem + 0.1vw, 0.9375rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --text-xl: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);
  --text-2xl: clamp(2.25rem, 1.6rem + 3vw, 4rem);
  --text-3xl: clamp(2.75rem, 1.6rem + 5vw, 5.5rem);
  --leading-tight: 1.05;
  --leading-body: 1.65;
  --tracking-tight: -0.03em;
  --tracking-label: 0.2em;

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2.5rem;
  --space-6: 4rem;
  --space-7: clamp(4rem, 3rem + 5vw, 8rem);

  /* Shape and depth */
  --radius-sm: 0.375rem;
  --radius-md: 0.75rem;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgb(32 24 40 / 8%);
  --shadow-md: 0 8px 24px rgb(32 24 40 / 12%);
  --shadow-lg: 0 30px 60px -30px rgb(75 33 112 / 45%);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 150ms;
  --duration-base: 300ms;
  --duration-slow: 800ms;

  /* Touch target (WCAG 2.2) */
  --tap-min: 2.75rem;

  /* Selected flooring-sales direction and child-theme homepage. */
  --font-sales-display: archivo, var(--font-body);
  --sales-display: clamp(2.7rem, 0.5rem + 8.3vw, 8rem);
  --sales-heading: clamp(2rem, 1.3rem + 2.8vw, 3.75rem);
  --sales-width: 80rem;
  --sales-reading: 48ch;
  --sales-hero-height: 44rem;
  --sales-media-height: 28rem;
  --sales-plan-height: 20rem;
  --sales-form-width: 36rem;
  --sales-scrim: linear-gradient(
    90deg,
    rgb(22 15 29 / 94%),
    rgb(22 15 29 / 72%) 55%,
    rgb(22 15 29 / 35%)
  );
  --sales-oak-grain: #6c472a;
  --sales-fine-border: 1px;
  --sales-focus-width: 3px;
  --sales-hidden-offset: -100rem;
  --sales-caption-bg: rgb(22 15 29 / 90%);
  --header-logo-width: clamp(10rem, 17vw, 15rem);
  --header-logo-inset: 0.5rem;
  --header-content-offset: 10rem;
  --header-scrim: linear-gradient(180deg, rgb(22 15 29 / 96%), rgb(22 15 29 / 0%));
  --header-rule: rgb(255 255 255 / 24%);
  --footer-logo-width: 26rem;
  --footer-brand-width: 28rem;
  --company-panel-width: 40rem;
  --company-panel-bg: rgba(22, 15, 29, 0.72);
  --color-transparent: rgb(0 0 0 / 0%);
  --footer-flag-size: 0.73em;
  --footer-flag-baseline: -0.13em;
  --header-glass-bg: rgba(22, 15, 29, 0.84);
  --header-glass-blur: 0.75rem;
  --hosting-display: clamp(2.5rem, 1.5rem + 4vw, 5.25rem);
  --hosting-photo-height: clamp(23rem, 30vw, 38rem);
  --hosting-note-width: 19rem;
  --hosting-note-tilt: -4deg;
  --hosting-note-rest: 2deg;
  --hosting-photo-tilt: -2deg;
  --hosting-scrim: linear-gradient(
    90deg,
    rgb(22 15 29 / 96%),
    rgb(22 15 29 / 85%) 45%,
    rgb(22 15 29 / 15%)
  );
  --hosting-bottom-scrim: linear-gradient(180deg, rgb(22 15 29 / 0%), rgb(22 15 29 / 90%));
  --hosting-note-line: 1.35;
  --hosting-shell-width: 96rem;
  --hosting-frame-height: 64rem;
  --hosting-plan-height: 27rem;
  --hosting-mobile-width: 375px;
  --home-desktop-heading: 3rem;
  --home-desktop-subheading: 1.5rem;
  --home-desktop-hosting-heading: 3.5rem;
  --home-desktop-review-quote: 1.75rem;
  --home-desktop-review-leading: 1.4;
  --footer-compact-logo-width: 15rem;
  --footer-compact-title: clamp(1.75rem, 1.3rem + 1.2vw, 2.5rem);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --duration-slow: 0ms;
  }
}