/* Tema RedCore - Testing Theme */
/* Theme: RedCore (Dark theme with Red/Orange palette for testing) */

.theme-redcore {
  /* ========================================
   * TYPOGRAPHY - Font Families
   * ======================================== */
  --typography-font-family-primary: var(--font-outfit);
  --typography-font-family-secondary: var(--font-rubik);

  /* ========================================
   * NEUTRAL COLORS - Complete scale (0-1000)
   * ======================================== */
    --neutral-0: #ffffff;
    --neutral-50: #fafafa;
    --neutral-100: #f2f2f2;
    --neutral-200: #ededed;
    --neutral-300: #d6d6d6;
    --neutral-400: #bcbcbc;
    --neutral-500: #8a8a8a;
    --neutral-550: #666666; 
    --neutral-600: #575757;
    --neutral-700: #414141;
    --neutral-750: #333333; 
    --neutral-800: #242424;
    --neutral-900: #1d1d1d;
    --neutral-950: #121212;
    --neutral-1000: #000000;
  /*
    MAIN COLORS

    ------ TEST VALUES ------
    --neutral-0: #F7F1ED;
    --neutral-50: #E9D7CD;
    --neutral-100: #DBBDAD;
    --neutral-200: #CDA38E;
    --neutral-300: #BF896E;
    --neutral-400: #B16F4E;
    --neutral-500: #915B40;
    --neutral-550: #714732;
    --neutral-600: #523324;
    --neutral-700: #301E15;
    --neutral-750: #333333;
    --neutral-800: #242424;
    --neutral-900: #1d1d1d;
    --neutral-950: #121212;
    --neutral-1000: #120B08;

    ------ ORIGINAL VALUES ------
    --neutral-0: #ffffff;
    --neutral-50: #fafafa;
    --neutral-100: #f2f2f2;
    --neutral-200: #ededed;
    --neutral-300: #d6d6d6;
    --neutral-400: #bcbcbc;
    --neutral-500: #8a8a8a;
    --neutral-550: #666666; 
    --neutral-600: #575757;
    --neutral-700: #414141;
    --neutral-750: #333333; 
    --neutral-800: #242424;
    --neutral-900: #1d1d1d;
    --neutral-950: #121212;
    --neutral-1000: #000000;
  */

  /* Neutral RGB variants for opacity usage */
  --neutral-0-rgb: 255, 255, 255;
  --neutral-1000-rgb: 0, 0, 0;

  /* ========================================
   * SUCCESS COLORS - Complete scale (50-900)
   * ======================================== */
  --success-50: #e8f5e9;
  --success-100: #c8e6c9;
  --success-200: #a5d6a7;
  --success-300: #81c784;
  --success-400: #66bb6a;
  --success-500: #4caf50;
  --success-600: #43a047;
  --success-700: #388e3c;
  --success-800: #2e7d32;
  --success-900: #1b5e20;

  /* Success RGB for dynamic opacity */
  --success-500-rgb: 76, 175, 80;

  /* ========================================
   * WARNING COLORS - Complete scale (50-900)
   * ======================================== */
  --warning-50: #fff8e1;
  --warning-100: #ffecb3;
  --warning-200: #ffe082;
  --warning-300: #ffd54f;
  --warning-400: #ffca28;
  --warning-500: #ffc107;
  --warning-600: #ffb300;
  --warning-700: #ffa000;
  --warning-800: #ff8f00;
  --warning-900: #ff6f00;

  /* Warning RGB for dynamic opacity */
  --warning-500-rgb: 255, 193, 7;

  /* ========================================
   * ERROR COLORS - Complete scale (50-900)
   * ======================================== */
  --error-50: #ffebee;
  --error-100: #ffcdd2;
  --error-200: #ef9a9a;
  --error-300: #e57373;
  --error-400: #ef5350;
  --error-500: #f44336;
  --error-600: #e53935;
  --error-700: #d32f2f;
  --error-800: #c62828;
  --error-900: #b71c1c;

  /* Error RGB for dynamic opacity */
  --error-500-rgb: 244, 67, 54;

  /* ========================================
   * UPLOAD COLORS - Complete scale (50-900)
   * ======================================== */
  --upload-50: #e3f2fd;
  --upload-100: #bbdefb;
  --upload-200: #90caf9;
  --upload-300: #64b5f6;
  --upload-400: #42a5f5;
  --upload-500: #2196f3;
  --upload-600: #1e88e5;
  --upload-700: #1976d2;
  --upload-800: #1565c0;
  --upload-900: #0d47a1;

  /* Upload RGB for dynamic opacity */
  --upload-500-rgb: 33, 150, 243;

  /* ========================================
   * ACCENT COLORS - Complete scale (50-900)
   * Red/Orange accent for RedCore theme
   * ======================================== */
  --accent-50: #fde8e9;
  --accent-100: #f9b9bb;
  --accent-200: #f7979a;
  --accent-300: #f3676c;
  --accent-400: #f14950;
  --accent-500: #ed1c24;
  --accent-600: #d81921;
  --accent-700: #a8141a;
  --accent-800: #820f14;
  --accent-900: #640c0f;

  /* Accent RGB for dynamic opacity */
  --accent-500-rgb: 255, 152, 0;

  /* ========================================
   * GRADIENT - Primary (Red/Orange)
   * ======================================== */
  --gradient-primary-start: #ED1C24;
  --gradient-primary-stop: #A8141A ;
  --gradient-primary: linear-gradient(85deg, var(--gradient-primary-start) 10%, var(--gradient-primary-stop) 100%);
  --gradient-primary-text: var(--neutral-0);

  /* ========================================
   * SEMANTIC TOKENS - Interaction States
   * ======================================== */
  --color-focus-outline: var(--accent-300);
  --color-hover-overlay: rgba(var(--neutral-0-rgb), 0.08);
  --color-active-overlay: rgba(var(--neutral-0-rgb), 0.16);

  /* Accent states */
  --color-accent: var(--accent-500);
  --color-accent-hover: var(--accent-400);

  /* Overlays */
  --color-overlay-dark: rgba(var(--neutral-1000-rgb), 0.8);
  --color-overlay-medium: rgba(var(--neutral-1000-rgb), 0.5);

  /* Input specific */
  --color-input-caret: var(--accent-500);
  --color-input-border-default: var(--neutral-700);
  --color-input-border-error: var(--error-500);

  /* ========================================
   * SEMANTIC TOKENS - Borders with Opacity
   * ======================================== */
  --color-border-base-op-16: rgba(var(--neutral-0-rgb), 0.16);
  --color-border-base-op-32: rgba(var(--neutral-0-rgb), 0.32);
  --color-border-base-op-08: rgba(var(--neutral-0-rgb), 0.08);

  /* ========================================
   * SEMANTIC TOKENS - Text with Opacity
   * ======================================== */
  --color-text-base-op-48: rgba(var(--neutral-0-rgb), 0.48);
  --color-text-base-op-64: rgba(var(--neutral-0-rgb), 0.64);
  --color-text-base-op-88: rgba(var(--neutral-0-rgb), 0.88);

  /* ========================================
   * ADAPTIVE SEMANTIC COLORS
   * ======================================== */
  --color-mode: dark; /* Theme type: dark or light */
  --color-background: var(--neutral-1000); /* Main background */
  --color-foreground: var(--neutral-0); /* Main text color */
  --color-surface: var(--neutral-900); /* Elevated surface (cards, etc) */
  --color-on-surface: var(--neutral-0); /* Text on elevated surfaces */
  --color-muted: var(--neutral-600); /* Secondary text */
  --color-border: var(--neutral-700); /* Default borders */

  /* ========================================
   * BASE COLORS (RGB format for Tailwind)
   * ======================================== */
  --base-0: 255 255 255;
  --base-950: 0 0 0;

  /* ========================================
   * BUTTON SEMANTIC TOKENS
   * Define colores específicos para botones que varían por tema
   * ======================================== */
  
  /* Primary Button - Rojo/Naranja en RedCore */
  --btn-primary-bg: var(--neutral-900);  /* #f57c00 - Naranja fuerte */
  --btn-primary-bg-hover: var(--neutral-700);
  --btn-primary-bg-active: var(--neutral-800);
  --btn-primary-bg-disabled: var(--neutral-300);
  --btn-primary-text: var(--neutral-0);
  --btn-primary-text-disabled: var(--neutral-500);
  --btn-primary-border: var(--neutral-900);
  --btn-primary-border-hover: var(--neutral-700);
  --btn-primary-border-disabled: var(--neutral-300);
  --btn-primary-svg: var(--accent-0);
  
  /* Secondary Button - Outline con accent */
  --btn-secondary-bg: transparent;
  --btn-secondary-bg-hover: rgba(var(--accent-500-rgb), 0.12);
  --btn-secondary-bg-active: rgba(var(--accent-500-rgb), 0.24);
  --btn-secondary-bg-disabled: transparent;
  --btn-secondary-text: var(--accent-900);
  --btn-secondary-text-disabled: var(--neutral-400);
  --btn-secondary-border: var(--accent-900);
  --btn-secondary-border-hover: var(--accent-700);
  --btn-secondary-border-disabled: var(--neutral-300);
  
  /* Tertiary/Ghost Button - Sin borde */
  --btn-tertiary-bg: transparent;
  --btn-tertiary-bg-hover: rgba(var(--accent-500-rgb), 0.08);
  --btn-tertiary-bg-active: rgba(var(--accent-500-rgb), 0.16);
  --btn-tertiary-bg-disabled: transparent;
  --btn-tertiary-text: var(--accent-900);
  --btn-tertiary-text-disabled: var(--neutral-400);
  
  /* Danger Button - Mantiene rojo */
  --btn-danger-bg: var(--error-500);
  --btn-danger-bg-hover: var(--error-600);
  --btn-danger-bg-active: var(--error-700);
  --btn-danger-bg-disabled: var(--neutral-300);
  --btn-danger-text: var(--neutral-0);
  --btn-danger-text-disabled: var(--neutral-500);
  --btn-danger-border: var(--error-500);
  --btn-danger-border-disabled: var(--neutral-300);
  
  /* Success Button */
  --btn-success-bg: var(--success-500);
  --btn-success-bg-hover: var(--success-600);
  --btn-success-bg-active: var(--success-700);
  --btn-success-bg-disabled: var(--neutral-300);
  --btn-success-text: var(--neutral-0);
  --btn-success-text-disabled: var(--neutral-500);
  --btn-success-border: var(--success-500);
  --btn-success-border-disabled: var(--neutral-600);

  /* PRIMARY ACCENT BACKGROUND */
  /* Used in charge bar */
  --bg-primary-accent: var(--neutral-900);
}