/* @corporatesclub/ui — Design System tokens (Etapa 1)
   Source palette: bixoto.com/smui.css (DevTools 2026-06)
   Typography: Sofia Pro (Bixoto) — self-hosted, see fonts.css
*/

:root {
  /* ── Legacy aliases (backward compatible) ── */
  --cc-ink: #000000;
  --cc-ink-hover: #cf3600;
  --cc-gray: #606060;
  --cc-gray-light: #b8b8b8;
  --cc-gold: #ff4200;
  --cc-gold-muted: rgba(255, 66, 0, 0.12);
  --cc-border: #b8b8b8;
  --cc-border-soft: #f0f0f0;
  --cc-bg: #ffffff;
  --cc-bg-muted: #f0f0f0;
  --cc-shadow-header: 0 1px 0 #b8b8b8;
  --cc-inside-pad: 20px;
  --cc-inside-pad-mobile: 16px;
  --cc-price-color: #000000;
  --cc-promo-badge: #d32020;

  /* ── Bixoto brand tokens (--cc-bx-*) ── */
  --cc-bx-bg: #ffffff;
  --cc-bx-surface: #f0f0f0;
  --cc-bx-surface-2: #f0f0f0;
  --cc-bx-border: #b8b8b8;
  --cc-bx-border-strong: #b8b8b8;
  --cc-bx-ink: #000000;
  --cc-bx-ink-secondary: #606060;
  --cc-bx-muted: #606060;
  --cc-bx-accent: #ff4200;
  --cc-bx-accent-hover: #cf3600;
  --cc-bx-accent-soft: #fff4f2;
  --cc-bx-secondary: #34c9a2;
  --cc-bx-secondary-hover: #2ba888;
  --cc-bx-secondary-soft: #ebfaf6;
  --cc-bx-alt: #e49b2d;
  --cc-bx-alt-hover: #e18904;
  --cc-bx-sale: #d32020;
  --cc-bx-sale-bg: #fff4f2;
  --cc-bx-success: #34c9a2;
  --cc-bx-success-bg: #ebfaf6;
  --cc-bx-info: #ff4200;
  --cc-bx-info-bg: #fff4f2;
  --cc-bx-radius: 8px;
  --cc-bx-radius-sm: 4px;
  --cc-bx-radius-lg: 12px;
  --cc-bx-shadow: 0 0 17px 5px rgba(0, 0, 0, 0.06);
  --cc-bx-shadow-md: 0 4px 24px rgba(0, 0, 0, 0.12);
  --cc-bx-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.14);
  --cc-bx-max: 1200px;
  --cc-bx-max-wide: 1500px;
  --cc-bx-trust-bg: #f0f0f0;
  --cc-bx-trust-ink: #606060;
  --cc-bx-header-h: 100px;
  --cc-bx-header-h-sm: 60px;

  /* ── Design system semantic tokens (--cc-ds-*) ── */
  --cc-ds-color-bg: var(--cc-bx-bg);
  --cc-ds-color-surface: var(--cc-bx-surface);
  --cc-ds-color-border: var(--cc-bx-border);
  --cc-ds-color-ink: var(--cc-bx-ink);
  --cc-ds-color-muted: var(--cc-bx-muted);
  --cc-ds-color-primary: var(--cc-bx-accent);
  --cc-ds-color-primary-hover: var(--cc-bx-accent-hover);
  --cc-ds-color-primary-soft: var(--cc-bx-accent-soft);
  --cc-ds-color-secondary: var(--cc-bx-secondary);
  --cc-ds-color-sale: var(--cc-bx-sale);
  --cc-ds-color-success: var(--cc-bx-success);
  --cc-ds-color-success-bg: var(--cc-bx-success-bg);
  --cc-ds-color-error: #b91c1c;
  --cc-ds-color-error-bg: #fef2f2;
  --cc-ds-color-warning: var(--cc-bx-alt);
  --cc-ds-color-warning-bg: #fffbeb;

  /* Typography */
  --cc-font-sans: "Sofia Pro", system-ui, -apple-system, "Segoe UI", Arial, Helvetica, sans-serif;
  --cc-font-display: "Sofia Pro", system-ui, -apple-system, "Segoe UI", Arial, Helvetica, sans-serif;
  --cc-ds-font-xs: 0.75rem;
  --cc-ds-font-sm: 0.875rem;
  --cc-ds-font-base: 1rem;
  --cc-ds-font-lg: 1.125rem;
  --cc-ds-font-xl: 1.25rem;
  --cc-ds-font-2xl: 1.5rem;
  --cc-ds-font-3xl: 2rem;
  --cc-ds-font-4xl: 2.5rem;
  --cc-ds-leading-tight: 1.2;
  --cc-ds-leading-normal: 1.5;
  --cc-ds-leading-ui: 1.25;
  --cc-ds-weight-regular: 400;
  --cc-ds-weight-medium: 500;
  --cc-ds-weight-semibold: 600;
  --cc-ds-weight-bold: 700;

  /* Spacing scale (px) */
  --cc-ds-space-1: 4px;
  --cc-ds-space-2: 8px;
  --cc-ds-space-3: 12px;
  --cc-ds-space-4: 16px;
  --cc-ds-space-5: 20px;
  --cc-ds-space-6: 24px;
  --cc-ds-space-8: 32px;
  --cc-ds-space-10: 40px;
  --cc-ds-space-12: 48px;
  --cc-ds-space-16: 64px;

  /* Radius */
  --cc-radius-sm: 4px;
  --cc-radius-md: 8px;
  --cc-radius-lg: 12px;
  --cc-radius-pill: 999px;

  /* Elevation / shadows */
  --cc-ds-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
  --cc-ds-shadow-md: var(--cc-bx-shadow);
  --cc-ds-shadow-lg: var(--cc-bx-shadow-lg);
  --cc-ds-elevation-0: none;
  --cc-ds-elevation-1: var(--cc-ds-shadow-sm);
  --cc-ds-elevation-2: var(--cc-ds-shadow-md);
  --cc-ds-elevation-3: 0 16px 48px rgba(0, 0, 0, 0.16);
  --cc-ds-elevation-4: 0 24px 64px rgba(0, 0, 0, 0.2);

  /* Breakpoints (for reference in JS/CSS media queries) */
  --cc-ds-bp-sm: 480px;
  --cc-ds-bp-md: 768px;
  --cc-ds-bp-lg: 1024px;
  --cc-ds-bp-xl: 1200px;
  --cc-ds-bp-xxl: 1500px;

  /* Layout / z-index */
  --cc-header-sticky-z: 500;
  --cc-ds-z-dropdown: 600;
  --cc-ds-z-modal: 1000;
  --cc-ds-z-toast: 1100;

  /* Motion */
  --cc-ds-duration-fast: 150ms;
  --cc-ds-duration-normal: 250ms;
  --cc-ds-ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* Focus ring */
  --cc-ds-focus-ring: 0 0 0 2px var(--cc-bx-bg), 0 0 0 4px rgba(255, 66, 0, 0.35);
}