/* ===================================
   CONTROL DESIGN SYSTEM 2026
   =================================== */

:root {
  /* === Base === */
  --black: #000000;
  --white: #FFFFFF;

  /* === Dark Palette === */
  --dark-950: #050507;
  --dark-900: #09090B;
  --dark-800: #0F0F12;
  --dark-700: #16161A;
  --dark-600: #1C1C21;
  --dark-500: #26262D;
  --dark-400: #38383F;
  --dark-300: #52525B;

  /* === Primary === */
  --indigo-600: #4F46E5;
  --indigo-500: #6366F1;
  --indigo-400: #818CF8;
  --indigo-300: #A5B4FC;

  /* === Accents === */
  --cyan-500: #06B6D4;
  --emerald-500: #10B981;
  --rose-500: #F43F5E;
  --amber-500: #F59E0B;

  /* === Gradients (MAIS MODERNO) === */
  --gradient-primary: linear-gradient(135deg, #6366F1 0%, #8B5CF6 50%, #A855F7 100%);
  --gradient-bg:
    radial-gradient(ellipse 100% 80% at 50% -30%, rgba(99, 102, 241, 0.2) 0%, transparent 50%),
    radial-gradient(ellipse 80% 60% at 100% 20%, rgba(139, 92, 246, 0.12) 0%, transparent 40%),
    radial-gradient(ellipse 60% 50% at 0% 80%, rgba(6, 182, 212, 0.08) 0%, transparent 40%),
    linear-gradient(180deg, var(--dark-950) 0%, var(--dark-900) 50%, var(--dark-950) 100%);

  /* === Semantic === */
  --success: #10B981;
  --success-bg: rgba(16, 185, 129, 0.12);
  --error: #F43F5E;
  --error-bg: rgba(244, 63, 94, 0.12);
  --warning: #F59E0B;
  --warning-bg: rgba(245, 158, 11, 0.12);

  /* === Surfaces === */
  --bg-base: var(--dark-950);
  --bg-elevated: var(--dark-800);
  --bg-card: rgba(15, 15, 18, 0.6);
  --bg-hover: rgba(99, 102, 241, 0.08);
  --bg-overlay: rgba(0, 0, 0, 0.85);

  /* === Text === */
  --text-primary: #FAFAFA;
  --text-secondary: #D4D4D8;
  --text-muted: #A1A1AA;

  /* === Borders === */
  --border: rgba(255, 255, 255, 0.08);
  --border-hover: rgba(255, 255, 255, 0.15);
  --border-active: rgba(99, 102, 241, 0.5);

  /* === Typography === */
  --font-logo: 'Bricolage Grotesque', system-ui, sans-serif;
  --font-display: 'Sora', system-ui, sans-serif;
  --font-body: 'Satoshi', 'Inter', system-ui, sans-serif;

  --text-xs: 0.8rem;
  --text-sm: 0.9rem;
  --text-base: 1rem;
  --text-lg: 1.15rem;
  --text-xl: 1.35rem;
  --text-2xl: 1.6rem;
  --text-3xl: 2.2rem;
  --text-4xl: 2.8rem;

  /* === Spacing === */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  /* === Radius === */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 28px;
  --radius-full: 9999px;

  /* === Shadows === */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.5);
  --shadow-glow: 0 0 60px rgba(99, 102, 241, 0.25);

  /* === Transitions === */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 400ms;
}