/* AIDEV-NOTE: v4 design tokens — matches wrapmate-site-v4 CSS custom properties */
:root {
  /* Brand */
  --brand-orange: #eb9610;
  --brand-orange-hover: #d4860e;
  --brand-orange-light: #fef3e2;
  --brand-teal: #0d9488;
  --brand-teal-light: #ccfbf1;

  /* Semantic */
  --background: #ffffff;
  --foreground: hsl(222, 47%, 11%);
  --primary: hsl(0, 0%, 9%);
  --primary-foreground: #ffffff;
  --muted: hsl(0, 0%, 96%);
  --muted-foreground: hsl(0, 0%, 45%);
  --destructive: hsl(0, 84%, 60%);
  --border: #e5e7eb;
  --radius: 0.5rem;

  /* Promo banner */
  --promo-banner-color: #e2e4d0;

  /* Nav */
  --nav-backdrop: rgba(191, 215, 213, 0.75);
  --nav-height: 64px;
  --banner-height: 0px;

  /* V4 theme — brand gold */
  --v4-gold: #d4922a;
  --v4-gold-8: rgba(212, 146, 42, 0.08);
  --v4-gold-10: rgba(212, 146, 42, 0.1);
  --v4-gold-20: rgba(212, 146, 42, 0.2);
  --v4-gold-light: #f0c56d;
  --v4-gold-light-15: rgba(240, 197, 109, 0.15);
  --v4-gold-light-40: rgba(240, 197, 109, 0.4);

  /* V4 theme — semantic surfaces */
  --v4-bg-muted: #f9fafb;
  --v4-bg-white: #ffffff;
}