/* ==========================================================================
   THEME — MuscularFit (default)
   Sets every brand-varying token. Applied at :root (the default brand) AND
   under [data-brand="muscularfit"], so you can host multiple brands on one
   page and scope a subtree with data-brand.

   To theme a new brand: copy this file, keep every token name, change values.
   ========================================================================== */
:root,
[data-brand="muscularfit"] {
  /* ---- Brand primary (orange — the "signal" color) ---- */
  --ds-primary: #ec673c;
  --ds-primary-hover: #f5845e;
  --ds-primary-tint: #fff2ee;
  --ds-primary-rgb: 236, 103, 60; /* @kind other */

  /* ---- Accent (teal — money / info) ---- */
  --ds-accent: #0c5f6d;
  --ds-accent-tint: #e6f2f4;
  --ds-price: var(--ds-accent);           /* the color money is written in */

  /* ---- Type families ---- */
  --ds-font-display: "Inter Tight", "Inter", system-ui, sans-serif;
  --ds-font-body: "Inter", system-ui, sans-serif;

  /* ---- Neutrals (warm grayscale) ---- */
  --ds-ink: #111111;
  --ds-gray-900: #1a1a1a;
  --ds-gray-700: #444444;
  --ds-gray-500: #888888;
  --ds-gray-300: #cccccc;
  --ds-gray-100: #f5f5f5;
  --ds-gray-50: #fafafa;
  --ds-white: #ffffff;

  /* ---- Semantic text / surface / border ---- */
  --ds-text: var(--ds-ink);
  --ds-text-body: var(--ds-gray-700);
  --ds-text-muted: var(--ds-gray-500);
  --ds-text-on-dark: var(--ds-white);

  --ds-surface: var(--ds-white);
  --ds-surface-sunken: var(--ds-gray-50);
  --ds-surface-dark: var(--ds-ink);
  --ds-surface-darker: var(--ds-gray-900);

  --ds-border: rgba(0, 0, 0, 0.06);
  --ds-border-strong: rgba(0, 0, 0, 0.12);
  --ds-border-input: var(--ds-gray-300);
  --ds-border-on-dark: rgba(255, 255, 255, 0.08);

  /* ---- Status ---- */
  --ds-success: #22c55e;
  --ds-whatsapp: #25d366;

  /* ---- Brand-tinted elevation ---- */
  --ds-primary-glow: rgba(var(--ds-primary-rgb), 0.25);      /* CTA hover glow */
  --ds-primary-glow-soft: rgba(var(--ds-primary-rgb), 0.10); /* card hover glow */
  --ds-shadow-cta: 0 8px 24px var(--ds-primary-glow);
  --ds-shadow-float: 0 4px 20px rgba(37, 211, 102, 0.40);
}