/**
 * CENDA Theme - CSS Variables (Global Color System)
 * Sistema de colores centralizado para fácil mantenimiento
 */

:root {
  /* PRIMARY COLORS - Brand */
  --color-primary-orange: #f57c00;
  --color-primary-orange-light: #ff8a3d;
  --color-primary-orange-dark: #ff6f00;
  --color-primary-orange-darker: #e36b00;

  /* SECONDARY COLORS - Brand */
  --color-secondary-brown: #532C0F;
  --color-secondary-brown-light: #703b11;
  --color-secondary-brown-lighter: #6e3a1e;
  --color-secondary-brown-dark: #5a3c28;
  --color-secondary-brown-darker: #7a5a3a;

  /* ACCENT COLORS */
  --color-accent-blue: #2f6d8c;
  --color-accent-green: #36b37e;
  --color-accent-gold: #ffc156;
  --color-accent-gold-light: #ffd27f;

  /* NEUTRAL COLORS - Backgrounds & Text */
  --color-neutral-white: #fff;
  --color-page-background: linear-gradient(135deg, #fffbf0 0%, #fff9f0 50%, #ffe8d0 100%);
  --color-neutral-light-bg: #f7f7f7;
  --color-neutral-lighter-bg: #fafafa;
  --color-neutral-light-gray: #f4f4f4;
  --color-neutral-light-gray-2: #f2f2f2;
  --color-neutral-gray: #666;
  --color-neutral-gray-light: #8997a2;
  --color-neutral-gray-medium: #6b7785;
  --color-neutral-gray-text: #525f6a;
  --color-neutral-text-light: #f0f0f0;
  --color-neutral-border: #eee;
  --color-neutral-border-light: #ccc;

  /* DARK & OVERLAYS */
  --color-dark-black: #000;
  --color-dark-text: #111;
  --color-dark-overlay-light: rgba(0, 0, 0, 0.2);
  --color-dark-overlay-medium: rgba(0, 0, 0, 0.25);
  --color-dark-overlay-dark: rgba(0, 0, 0, 0.8);

  /* SHADOWS */
  --shadow-light: 0 0 10px rgba(0, 0, 0, 0.1);
  --shadow-small: 0 4px 12px rgba(0, 0, 0, 0.1);
  --shadow-medium: 0 8px 24px rgba(0, 0, 0, 0.15);
  --shadow-large: 0 12px 32px rgba(0, 0, 0, 0.25);
  --shadow-extra-large: 0 20px 40px rgba(0, 0, 0, 0.3);

  /* TRANSITIONS */
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;
  --transition-smooth: 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  --transition-slow: 0.4s ease;

  /* BORDER RADIUS */
  --radius-small: 4px;
  --radius-medium: 8px;
  --radius-large: 12px;
  --radius-extra-large: 20px;
  --radius-full: 50%;
}