/* ==========================================================================
   AUTO PROD BOT — Design Tokens
   Sistema unificado de variáveis CSS
   Gerado: 2026-02-20 | @ux-design-expert | Synkra AIOS
   ========================================================================== */

:root {
  /* -----------------------------------------------------------------------
     1. CORES SEMÂNTICAS (Primary / Secondary)
     ----------------------------------------------------------------------- */
  --color-primary:        #6c5ce7;
  --color-primary-light:  #a29bfe;
  --color-primary-dark:   #5a4bd6;
  --color-secondary:      #6366f1;
  --color-secondary-light:#818cf8;
  --color-secondary-dark: #4f46e5;

  /* -----------------------------------------------------------------------
     2. CORES DE ESTADO
     ----------------------------------------------------------------------- */
  --color-success:        #28a745;
  --color-success-light:  #48c774;
  --color-success-dark:   #1e7e34;
  --color-warning:        #ffc107;
  --color-warning-light:  #ffdb4d;
  --color-warning-dark:   #e0a800;
  --color-danger:         #dc3545;
  --color-danger-light:   #e4606d;
  --color-danger-dark:    #c82333;
  --color-info:           #17a2b8;
  --color-info-light:     #3fc5d9;
  --color-info-dark:      #117a8b;

  /* -----------------------------------------------------------------------
     3. CORES DE MARCA — WhatsApp
     ----------------------------------------------------------------------- */
  --color-whatsapp:       #25D366;
  --color-whatsapp-dark:  #1fa855;
  --color-whatsapp-light: #45E580;

  /* -----------------------------------------------------------------------
     4. CORES DE MARCA — Pagamentos
     ----------------------------------------------------------------------- */
  --color-pay-visa:       #1a1f71;
  --color-pay-mastercard: #eb001b;
  --color-pay-amex:       #006fcf;
  --color-pay-discover:   #ff6000;
  --color-pay-bitcoin:    #f7931a;
  --color-pay-pix:        #32BCAD;

  /* -----------------------------------------------------------------------
     5. CORES DE MARCA — Consoles
     ----------------------------------------------------------------------- */
  --color-console-playstation: #0066cc;
  --color-console-nintendo:    #e4000f;
  --color-console-xbox:        #107c10;
  --color-console-pc:          #17a2b8;
  --color-console-outros:      #6c757d;

  /* -----------------------------------------------------------------------
     6. NEUTRALS (defaults — overridden by themes)
     ----------------------------------------------------------------------- */
  --color-bg-page:        #f8f9fa;
  --color-bg-card:        #ffffff;
  --color-bg-input:       #ffffff;
  --color-bg-hover:       rgba(0, 0, 0, 0.04);
  --color-border:         #dee2e6;
  --color-border-light:   #e9ecef;
  --color-text:           #212529;
  --color-text-secondary: #6c757d;
  --color-text-muted:     #adb5bd;
  --color-overlay:        rgba(0, 0, 0, 0.5);
  --color-overlay-heavy:  rgba(0, 0, 0, 0.8);

  /* -----------------------------------------------------------------------
     7. TIPOGRAFIA
     ----------------------------------------------------------------------- */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'Courier New', Consolas, monospace;

  /* Font Sizes — 8 step scale */
  --text-xs:   0.75rem;   /* 12px — badges, timestamps */
  --text-sm:   0.875rem;  /* 14px — labels, captions, btn-sm */
  --text-base: 1rem;      /* 16px — body, inputs, buttons */
  --text-md:   1.125rem;  /* 18px — card headers, subtitles */
  --text-lg:   1.25rem;   /* 20px — section headers */
  --text-xl:   1.5rem;    /* 24px — page titles */
  --text-2xl:  2rem;      /* 32px — hero subtitles, pricing */
  --text-3xl:  2.5rem;    /* 40px — hero headlines */

  /* Font Weights */
  --font-normal:   400;
  --font-medium:   500;
  --font-semibold: 600;
  --font-bold:     700;

  /* Line Heights */
  --leading-tight:   1.2;
  --leading-normal:  1.5;
  --leading-relaxed: 1.7;

  /* -----------------------------------------------------------------------
     8. ESPAÇAMENTO — base 4px scale
     ----------------------------------------------------------------------- */
  --space-0:  0;
  --space-1:  0.25rem;  /*  4px */
  --space-2:  0.5rem;   /*  8px */
  --space-3:  0.75rem;  /* 12px */
  --space-4:  1rem;     /* 16px */
  --space-5:  1.25rem;  /* 20px */
  --space-6:  1.5rem;   /* 24px */
  --space-8:  2rem;     /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */
  --space-20: 5rem;     /* 80px */

  /* -----------------------------------------------------------------------
     9. BORDER-RADIUS — 5 steps
     ----------------------------------------------------------------------- */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   20px;
  --radius-full: 9999px;

  /* -----------------------------------------------------------------------
     10. BOX-SHADOW — 4 elevation levels
     ----------------------------------------------------------------------- */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.15);
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.2);
  --shadow-xl: 0 20px 50px rgba(0, 0, 0, 0.3);

  /* Glow variants (dark theme accents) */
  --glow-primary:  0 0 20px rgba(108, 92, 231, 0.3);
  --glow-whatsapp: 0 0 20px rgba(37, 211, 102, 0.3);
  --glow-success:  0 0 20px rgba(40, 167, 69, 0.3);

  /* Focus ring */
  --focus-ring: 0 0 0 3px rgba(108, 92, 231, 0.25);

  /* -----------------------------------------------------------------------
     11. TRANSITIONS
     ----------------------------------------------------------------------- */
  --transition-fast:   0.15s ease;
  --transition-normal: 0.2s ease;
  --transition-slow:   0.3s ease;

  /* -----------------------------------------------------------------------
     12. Z-INDEX SCALE
     ----------------------------------------------------------------------- */
  --z-dropdown:  1000;
  --z-sticky:    1020;
  --z-fixed:     1030;
  --z-modal-bg:  1040;
  --z-modal:     1050;
  --z-popover:   1060;
  --z-tooltip:   1070;
  --z-overlay:   9999;
}

/* ==========================================================================
   GLOBAL RESET (applies to both themes)
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--font-normal);
  line-height: var(--leading-normal);
  color: var(--color-text);
  background-color: var(--color-bg-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ==========================================================================
   ACCESSIBILITY
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}