/**
 * CB Ventures - Design Tokens
 * Última atualização: 15/02/2026
 * Sistema unificado de tokens CSS para consistência visual
 */

:root {
  /* ========== SEMANTIC TOKENS (UNIFIED) ========== */
  --bg: #05060e;
  --bg-alt: #02030a;
  --surface: #0b0d1f;
  --surface-2: #0b1030;
  --surface-3: #060a24;
  --surface-card: rgba(16, 21, 48, 0.9);
  --text: #ffffff;
  --text-soft: #eef1ff;
  --muted: rgba(255, 255, 255, 0.7);
  --muted-light: #a6b1e0;
  --border: rgba(255, 255, 255, 0.1);
  --border-light: rgba(255, 255, 255, 0.12);
  --border-strong: rgba(255, 255, 255, 0.2);

  --primary: #5858ff;
  --primary-light: #7b7bff;
  --primary-dark: #4040dd;
  --primary-contrast: #ffffff;

  --accent: #f99b28;
  --accent-light: #ffca7a;
  --accent-gold: #a67c2d;
  --accent-terracotta: #c85a3a;

  --success: #10b981;
  --danger: #ff5757;
  --warning: #f59e0b;

  --primary-soft: rgba(var(--primary-rgb), 0.18);
  --accent-soft: rgba(var(--accent-rgb), 0.18);
  --accent-gold-soft: rgba(var(--accent-gold-rgb), 0.18);
  --success-soft: rgba(var(--success-rgb), 0.18);
  --danger-soft: rgba(var(--danger-rgb), 0.18);
  --warning-soft: rgba(var(--warning-rgb), 0.18);

  /* ========== RGB TOKENS ========== */
  --bg-rgb: 5, 6, 14;
  --surface-rgb: 11, 13, 31;
  --text-rgb: 255, 255, 255;
  --primary-rgb: 88, 88, 255;
  --accent-rgb: 249, 155, 40;
  --accent-gold-rgb: 166, 124, 45;
  --accent-terracotta-rgb: 200, 90, 58;
  --success-rgb: 16, 185, 129;
  --danger-rgb: 255, 87, 87;
  --warning-rgb: 245, 158, 11;
  --shadow-rgb: 0, 0, 0;
  --white-rgb: 255, 255, 255;

  /* ========== GRADIENTES ========== */
  --grad-primary: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
  --grad-accent: linear-gradient(135deg, var(--accent) 0%, var(--accent-light) 100%);
  --grad-mixed: linear-gradient(135deg, var(--accent) 0%, var(--primary) 100%);
  --grad-hero: radial-gradient(ellipse at top left, rgba(var(--primary-rgb), 0.15) 0%, transparent 50%),
               radial-gradient(ellipse at bottom right, rgba(var(--accent-rgb), 0.12) 0%, transparent 50%);

  /* ========== ESTADOS ========== */
  --focus: rgba(var(--primary-rgb), 0.3);
  --focus-ring: rgba(var(--primary-rgb), 0.2);

  /* ========== SOMBRAS ========== */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.15), 0 5px 10px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 50px rgba(0, 0, 0, 0.25), 0 10px 20px rgba(0, 0, 0, 0.15);
  --shadow-soft: 0 24px 60px rgba(18, 30, 110, 0.4);
  --shadow-primary: 0 10px 30px rgba(var(--primary-rgb), 0.4);
  --shadow-primary-hover: 0 15px 40px rgba(var(--primary-rgb), 0.5);

  /* ========== ESPAÇAMENTOS ========== */
  --spacing-xs: 0.5rem;    /* 8px */
  --spacing-sm: 0.75rem;   /* 12px */
  --spacing-md: 1rem;      /* 16px */
  --spacing-lg: 1.5rem;    /* 24px */
  --spacing-xl: 2rem;      /* 32px */
  --spacing-2xl: 3rem;     /* 48px */
  --spacing-3xl: 4rem;     /* 64px */

  /* ========== BORDAS ARREDONDADAS ========== */
  --radius-sm: 0.5rem;     /* 8px */
  --radius-md: 0.75rem;    /* 12px */
  --radius-lg: 1rem;       /* 16px */
  --radius-xl: 1.5rem;     /* 24px */
  --radius-full: 999px;

  /* ========== TRANSIÇÕES ========== */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ========== CONTAINERS ========== */
  --container-xs: 640px;
  --container-sm: 768px;
  --container-md: 1024px;
  --container-lg: 1280px;
  --container-xl: 1440px;
  --container-2xl: 1600px;

  /* ========== LEGACY ALIASES (CB) ========== */
  --digital-accent: var(--primary);

  --cb-primary: var(--primary);
  --cb-primary-hover: var(--primary-dark);
  --cb-primary-light: var(--primary-light);
  --cb-accent: var(--accent);
  --cb-accent-light: var(--accent-light);
  --gold-dark: var(--accent-gold);

  --cb-bg: var(--bg);
  --cb-bg-alt: var(--bg-alt);
  --cb-surface: var(--surface);
  --cb-surface-alt: var(--surface-2);
  --cb-surface-dark: var(--surface-3);
  --cb-card: var(--surface-card);

  --cb-text: var(--text);
  --cb-text-secondary: var(--text-soft);
  --cb-muted: var(--muted);
  --cb-muted-light: var(--muted-light);

  --cb-border: var(--border);
  --cb-border-light: var(--border-light);
  --cb-border-strong: var(--border-strong);

  --cb-focus: var(--focus);
  --cb-focus-ring: var(--focus-ring);
  --cb-danger: var(--danger);
  --cb-success: var(--success);
  --cb-warning: var(--warning);

  --cb-grad-primary: var(--grad-primary);
  --cb-grad-accent: var(--grad-accent);
  --cb-grad-mixed: var(--grad-mixed);
  --cb-grad-hero: var(--grad-hero);

  --cb-shadow-sm: var(--shadow-sm);
  --cb-shadow-md: var(--shadow-md);
  --cb-shadow-lg: var(--shadow-lg);
  --cb-shadow-xl: var(--shadow-xl);
  --cb-shadow-soft: var(--shadow-soft);
  --cb-shadow-primary: var(--shadow-primary);
  --cb-shadow-primary-hover: var(--shadow-primary-hover);

  --cb-spacing-xs: var(--spacing-xs);
  --cb-spacing-sm: var(--spacing-sm);
  --cb-spacing-md: var(--spacing-md);
  --cb-spacing-lg: var(--spacing-lg);
  --cb-spacing-xl: var(--spacing-xl);
  --cb-spacing-2xl: var(--spacing-2xl);
  --cb-spacing-3xl: var(--spacing-3xl);

  --cb-radius-sm: var(--radius-sm);
  --cb-radius-md: var(--radius-md);
  --cb-radius-lg: var(--radius-lg);
  --cb-radius-xl: var(--radius-xl);
  --cb-radius-full: var(--radius-full);

  --cb-transition-fast: var(--transition-fast);
  --cb-transition-base: var(--transition-base);
  --cb-transition-slow: var(--transition-slow);

  --cb-container-xs: var(--container-xs);
  --cb-container-sm: var(--container-sm);
  --cb-container-md: var(--container-md);
  --cb-container-lg: var(--container-lg);
  --cb-container-xl: var(--container-xl);
  --cb-container-2xl: var(--container-2xl);

  /* ========== Z-INDEX ========== */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
}
