/**
 * CostBeacon marketing site — design tokens (aligned with web-next lookbook).
 */
:root {
  color-scheme: light;
  --color-brand: #6f61ef;
  --color-brand-strong: #5a4ed4;
  --color-brand-soft: #e8e4fc;
  --color-brand-softer: #f3f1fd;
  --color-brand-deep: #1b1740;
  --color-brand-ink: #15161e;
  --color-tertiary: #ffd301;
  --color-secondary-brand: #7bb662;
  --color-qbo: #2ca01c;

  --background: #ffffff;
  --foreground: #15161e;
  --card: #ffffff;
  --card-foreground: #15161e;
  --muted: #f1f4f8;
  --muted-foreground: #606a85;
  --border: #e5e7eb;
  --primary: #6f61ef;
  --primary-foreground: #ffffff;
  --accent: #edeafc;
  --accent-foreground: #1b1740;
  --destructive: #c4121e;
  --ring: #6f61ef;

  --radius: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.25rem;

  --font-sans: "Outfit", ui-sans-serif, system-ui, sans-serif;
  --font-secondary: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "SF Mono", Consolas, monospace;

  --section-y: clamp(4rem, 8vw, 7.5rem);
  --section-y-after-hero: clamp(3rem, 7vw, 5.5rem);
  --container: min(72rem, calc(100% - 2rem));
  --header-h: 4.25rem;

  --shadow-sm: 0 1px 2px rgba(21, 22, 30, 0.06);
  --shadow-md: 0 8px 30px rgba(21, 22, 30, 0.08);
  --shadow-lg: 0 20px 50px rgba(111, 97, 239, 0.12);

  /* App screenshots (help/*.png): 1920×945. Hero: home-header.jpg 1320×642 */
  --cb-screenshot-ratio: 1920 / 945;
  --cb-hero-shot-ratio: 1320 / 642;
}