/* UBlockout design tokens (CSS custom properties)
 *
 * Mirrors the colors/fonts defined in tailwind-config.js so non-Tailwind
 * components (e.g. offer-card.css) can reference the same palette without
 * duplicating hex values. Import once per page that needs them:
 *
 *   <link rel="stylesheet" href="/design-system/tokens.css">
 *
 * Or @import from another stylesheet. Tokens live on :root so they
 * cascade everywhere; component-scoped tokens (like the offer-card's
 * --oc-* vars) remain scoped to that component's root selector.
 */

:root {
  /* Brand colors */
  --ub-black: #000000;
  --ub-surface: #1A1A1A;
  --ub-border: #333333;
  --ub-blue: #175EB7;
  --ub-blue-dark: #1459af;
  --ub-blue-accent: #1A6DD4;     /* slightly lighter blue used for hover/accents */
  --ub-dark-blue: #0C3981;
  --ub-light-blue: #AED2FF;
  --ub-grey: #f9f9fa;
  --ub-pink: #F5D1CF;
  --ub-green: #0B865D;
  --ub-green-bright: #4ec07a;    /* lighter green used inside dark cards */
  --ub-red: #D17979;
  --ub-gold: #FCBF7A;
  --ub-gold-star: #F8B84E;       /* star-rating fill */

  /* Semantic */
  --ub-text: #D8D8D8;
  --ub-text-on-light: #1A1A1A;
  --ub-text-muted: #A6A6A6;
  --ub-text-muted-dark: #666666;
  --ub-error: #D32F2F;
  --ub-success: #0B865D;
  --ub-sale-bg: #FFE6C2;
  --ub-sale-text: #3B2F17;

  /* Typography */
  --ub-font-sans: "HK Nova", sans-serif;
  --ub-font-display: "Avenir", sans-serif;
  --ub-font-weight-sans: 600;    /* HK Nova ships SemiBold as the canonical weight */

  /* Radii */
  --ub-radius-sm: 8px;
  --ub-radius-md: 12px;
  --ub-radius-lg: 16px;
  --ub-radius-pill: 999px;
}