/* RadDeals · Google Review Care — design tokens (D-2, 2026-10-27)
   Drop into :root. Font: DM Sans 400 + 700 (Google Fonts) with system fallback. */
:root {
  /* Colour — surfaces */
  --color-bg: #FFFBF3;            /* page background, warm off-white */
  --color-surface: #FFFFFF;       /* cards, inputs */
  --color-surface-warm: #FFF4D6;  /* alternate section bg, owner-reply bubble, icon tiles */
  --color-dark: #1C1A17;          /* footer / final CTA band */

  /* Colour — text */
  --color-text: #1C1A17;          /* headings + body (16.8:1 on bg) */
  --color-text-muted: #5E584D;    /* secondary text (6.8:1 on bg) */
  --color-on-dark: #FFFBF3;       /* text on --color-dark (16.8:1) */
  --color-on-dark-muted: #CFC8BA; /* secondary text on --color-dark (10.4:1) */

  /* Colour — action + brand */
  --color-primary: #0E6B3B;       /* main CTA ("Get a free review audit"), links, focus. White text 6.6:1 */
  --color-primary-hover: #0A552F; /* hover/active (8.9:1) */
  --color-on-primary: #FFFFFF;
  --color-accent: #FFD241;        /* RadDeals yellow (from existing logo). Fills only, never text on light bg */
  --color-on-accent: #1C1A17;     /* text on yellow (12.0:1) */

  /* Colour — status */
  --color-star: #C27C00;          /* star rating glyphs (3.4:1 on white, non-text AA) */
  --color-success: #1F7A45;       /* checkmarks, "replied" labels (5.4:1 on white) */
  --color-danger: #B3261E;        /* form errors, "unanswered" tag (6.5:1 on white) */

  /* Colour — lines */
  --color-border: #E7DFCE;        /* decorative card borders, dividers */
  --color-border-strong: #8A8173; /* input borders, focusable outlines (3.8:1 on white) */
  --color-focus: #0E6B3B;         /* focus ring */

  /* Type */
  --font-sans: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  --font-weight-regular: 400;
  --font-weight-bold: 700;

  /* Type scale — fluid: first value = mobile (390px), last = desktop (1440px) */
  --text-xs: 0.8125rem;                                  /* 13px  legal, captions */
  --text-sm: 0.9375rem;                                  /* 15px  labels, small print */
  --text-base: clamp(1rem, 0.96rem + 0.19vw, 1.125rem);  /* 16 → 18px body */
  --text-lg: clamp(1.125rem, 1.06rem + 0.29vw, 1.3125rem); /* 18 → 21px lead para, card titles */
  --text-xl: clamp(1.25rem, 1.12rem + 0.57vw, 1.625rem); /* 20 → 26px h3 */
  --text-2xl: clamp(1.625rem, 1.38rem + 1.05vw, 2.375rem); /* 26 → 38px h2 */
  --text-3xl: clamp(2rem, 1.6rem + 1.72vw, 3.25rem);     /* 32 → 52px h1 */

  --leading-tight: 1.15;  /* h1, h2 */
  --leading-snug: 1.3;    /* h3, buttons, card titles */
  --leading-body: 1.6;    /* paragraphs */
  --tracking-tight: -0.02em; /* h1, h2 only */

  /* Spacing (4px base) */
  --space-1: 0.25rem;  /* 4  */
  --space-2: 0.5rem;   /* 8  */
  --space-3: 0.75rem;  /* 12 */
  --space-4: 1rem;     /* 16 */
  --space-5: 1.5rem;   /* 24 */
  --space-6: 2rem;     /* 32 */
  --space-7: 3rem;     /* 48 */
  --space-8: 4rem;     /* 64 */
  --space-9: 6rem;     /* 96 */
  --section-padding-y: clamp(3rem, 2.3rem + 2.9vw, 6rem); /* 48 → 96px */
  --page-gutter: clamp(1.25rem, 0.9rem + 1.5vw, 2.5rem);  /* 20 → 40px */
  --content-max: 72rem;   /* 1152px container */
  --text-max: 40rem;      /* 640px readable line length */

  /* Radius */
  --radius-sm: 8px;    /* inputs, tags */
  --radius-md: 12px;   /* buttons */
  --radius-lg: 20px;   /* cards */
  --radius-pill: 999px;

  /* Shadows (warm-tinted, subtle) */
  --shadow-sm: 0 1px 2px rgba(28, 26, 23, 0.06), 0 1px 3px rgba(28, 26, 23, 0.08);
  --shadow-md: 0 4px 12px rgba(28, 26, 23, 0.08), 0 2px 4px rgba(28, 26, 23, 0.05);
  --shadow-lg: 0 16px 40px rgba(28, 26, 23, 0.12);

  /* Controls */
  --tap-min: 48px;          /* min height for buttons/links-as-buttons (≥44px rule) */
  --focus-ring: 0 0 0 3px var(--color-bg), 0 0 0 6px var(--color-focus);
  --transition: 150ms ease;
}