/* ==========================================================================
   TRDR Design System — CSS Variables
   Fonte: Figma Variables | Atualizado: 2026-05-06
   ========================================================================== */

:root {

  /* =========================================================================
     PRIMITIVOS — CORES
     Nunca use diretamente na UI. Use tokens semânticos.
     ========================================================================= */

  /* Brand Cyan (renomeado de Azul — escala brand principal) */
  --color-blue-50: #E6FEFF;
  --color-blue-100: #CCFDFF;
  --color-blue-200: #99F9FF;
  --color-blue-300: #5CF3FF;
  --color-blue-400: #29ECFF;
  --color-blue-500: #00D4FF;
  --color-blue-600: #00A8CC;
  --color-blue-700: #007D99;
  --color-blue-800: #005266;
  --color-blue-900: #002933;
  --color-blue-alpha-08: #00D4FF14;
  --color-blue-alpha-16: #00D4FF29;
  --color-blue-alpha-32: #00D4FF52;

  /* Neutro */
  --color-neutral-0: #FFFFFF;
  --color-neutral-50: #FAFAFA;
  --color-neutral-100: #EEEEEE;
  --color-neutral-200: #E8E8E8;
  --color-neutral-300: #D2D2D2;
  --color-neutral-400: #BCBCBC;
  --color-neutral-500: #A4A4A4;
  --color-neutral-600: #777777;
  --color-neutral-700: #4A4A4A;
  --color-neutral-800: #222222;
  --color-neutral-900: #1A1A1A;
  --color-neutral-1000: #141519;
  --color-neutral-1200: #0E0E0E;

  /* Verde */
  --color-green-50: #F0FFF7;
  --color-green-100: #CCFFDF;
  --color-green-200: #99FFBF;
  --color-green-300: #66FFA0;
  --color-green-400: #33FF80;
  --color-green-500: #00FF60;
  --color-green-600: #31DD7E;
  --color-green-700: #00CC4D;
  --color-green-800: #009933;
  --color-green-900: #00661F;
  --color-green-alpha-08: #4FE29014;
  --color-green-alpha-12: #4FE2901F;
  --color-green-alpha-16: #4FE29029;
  --color-green-alpha-32: #4FE29052;
  --color-green-alpha-40: #4FE29066;
  --color-green-alpha-48: #4FE2907A;
  --color-green-alpha-56: #4FE2908F;

  /* Vermelho */
  --color-red-50: #FFF0F0;
  --color-red-100: #FFCCCC;
  --color-red-200: #FF9999;
  --color-red-300: #FF6666;
  --color-red-400: #FF3333;
  --color-red-500: #FF0000;
  --color-red-600: #F34F45;
  --color-red-700: #CC0000;
  --color-red-800: #990000;
  --color-red-900: #660000;
  --color-red-alpha-08: #F34F4514;
  --color-red-alpha-12: #F34F451F;
  --color-red-alpha-16: #F34F4529;
  --color-red-alpha-32: #F34F4552;
  --color-red-alpha-40: #F34F4566;
  --color-red-alpha-48: #F34F457A;
  --color-red-alpha-56: #F34F458F;

  /* Amarelo */
  --color-yellow-50: #FFFBF0;
  --color-yellow-100: #FFF3CC;
  --color-yellow-200: #FFE799;
  --color-yellow-300: #FFDB66;
  --color-yellow-400: #FFCF33;
  --color-yellow-500: #FFCC40;
  --color-yellow-600: #FFB800;
  --color-yellow-700: #CC9200;
  --color-yellow-800: #996D00;
  --color-yellow-900: #664900;
  --color-yellow-alpha-08: #FFCC4014;
  --color-yellow-alpha-16: #FFCC4029;
  --color-yellow-alpha-32: #FFCC4052;

  /* Laranja */
  --color-orange-50: #FFF5F0;
  --color-orange-100: #FFE0CC;
  --color-orange-200: #FFC199;
  --color-orange-300: #FFA266;
  --color-orange-400: #FF8333;
  --color-orange-500: #FF6400;
  --color-orange-600: #F57C00;
  --color-orange-700: #CC5000;
  --color-orange-800: #993C00;
  --color-orange-900: #662800;
  --color-orange-alpha-08: #FF640014;
  --color-orange-alpha-16: #FF640029;
  --color-orange-alpha-32: #FF640052;

  /* Roxo */
  --color-purple-50: #F1EFF5;
  --color-purple-100: #D6D3E5;
  --color-purple-200: #BBB4D6;
  --color-purple-300: #9E94C9;
  --color-purple-400: #8072BE;
  --color-purple-500: #6350B3;
  --color-purple-600: #50418E;
  --color-purple-700: #3E3467;
  --color-purple-800: #2A2542;
  --color-purple-900: #161320;
  --color-purple-alpha-08: #6350B314;
  --color-purple-alpha-16: #6350B329;
  --color-purple-alpha-32: #6350B352;

  /* =========================================================================
     PRIMITIVOS — ESPAÇAMENTOS
     ========================================================================= */
  --space-0: 0px;
  --space-50: 4px;
  --space-100: 8px;
  --space-200: 12px;
  --space-300: 16px;
  --space-400: 20px;
  --space-500: 24px;
  --space-600: 32px;
  --space-700: 40px;
  --space-800: 48px;
  --space-900: 56px;
  --space-1000: 64px;
  --space-1200: 80px;
  --space-1400: 96px;

  /* =========================================================================
     PRIMITIVOS — BORDER RADIUS
     ========================================================================= */
  --radius-prim-0: 0px;
  --radius-prim-50: 2px;
  --radius-prim-100: 4px;
  --radius-prim-200: 8px;
  --radius-prim-300: 12px;
  --radius-prim-400: 16px;
  --radius-prim-500: 20px;
  --radius-prim-600: 24px;
  --radius-prim-700: 32px;
  --radius-prim-full: 9999px;

  /* =========================================================================
     PRIMITIVOS — TIPOGRAFIA
     ========================================================================= */
  --font-size-50: 12px;
  --font-size-100: 14px;
  --font-size-200: 16px;
  --font-size-300: 18px;
  --font-size-400: 20px;
  --font-size-500: 24px;
  --font-size-600: 28px;
  --font-size-700: 32px;
  --font-size-800: 40px;

  /* =========================================================================
     PRIMITIVOS — OPACIDADES
     ========================================================================= */
  --opacity-0: 0;
  --opacity-08: 0.08;
  --opacity-16: 0.16;
  --opacity-32: 0.32;
  --opacity-48: 0.48;
  --opacity-64: 0.64;
  --opacity-80: 0.80;
  --opacity-100: 1;

  /* =========================================================================
     SEMÂNTICOS — BACKGROUNDS (Dark padrão)
     ========================================================================= */
  --bg-primary: #0E0E0E;
  --bg-secondary: #141519;
  --bg-tertiary: #1A1A1A;
  --bg-inverse: #FFFFFF;
  --bg-overlay: #FFFFFF29;
  --bg-brand: #00D4FF;
  --bg-brand2: #6350B3;
  --bg-warning: #FFCC40;
  --bg-danger: #F34F45;
  --bg-success: #31DD7E;
  --bg-base-alpha-0: #0E0E0E00;

  /* =========================================================================
     SEMÂNTICOS — SURFACES
     ========================================================================= */
  --surface-primary: #4A4A4A;
  --surface-secondary: #222222;
  --surface-tertiary: #1A1A1A;
  --surface-interactive: #002933;
  --surface-disabled: #1A1A1A;
  --surface-info: #00D4FF14;
  --surface-error: #F1312614;
  --surface-warning: #FFCC4014;
  --surface-success: #4FE29014;
  --surface-brand: #00D4FF29;

  /* =========================================================================
     SEMÂNTICOS — CONTEÚDO (TEXTO)
     ========================================================================= */
  --content-primary: #FFFFFF;
  --content-secondary: #E8E8E8;
  --content-tertiary: #A4A4A4;
  --content-placeholder: #A4A4A4;
  --content-disabled: #4A4A4A;
  --content-inverse: #1A1A1A;
  --content-info: #CCFDFF;
  --content-warning: #FFD35A;
  --content-error: #F34F45;
  --content-success: #4FE290;
  --content-brand: #00D4FF;

  /* =========================================================================
     SEMÂNTICOS — BORDAS
     ========================================================================= */
  --border-default: #4A4A4A;
  --border-subtle: #222222;
  --border-strong: #A4A4A4;
  --border-focus: #00D4FF;
  --border-disabled: #777777;

  /* =========================================================================
     SEMÂNTICOS — AÇÕES
     ========================================================================= */

  /* Brand (Ciano — primário) */
  --action-brand-default: #00D4FF;
  --action-brand-hover: #00A8CC;
  --action-brand-active: #007D99;
  --action-brand-disabled: #777777;
  --action-brand-alpha: #00D4FF14;

  /* Brand Inverse (botão CTA primário sólido) */
  --action-brand-inverse-default: #005266;
  --action-brand-inverse-hover: #007D99;
  --action-brand-inverse-active: #002933;
  --action-brand-inverse-alpha: #00D4FF14;
  --action-brand-inverse-disabled: #777777;

  /* Secondary (Neutro) */
  --action-secondary-default: #4A4A4A;
  --action-secondary-hover: #777777;
  --action-secondary-active: #A4A4A4;
  --action-secondary-disabled: #1A1A1A;
  --action-secondary-alpha: #FFFFFF00;

  /* Tertiary (Roxo) */
  --action-tertiary-default: #50418E;
  --action-tertiary-hover: #3E3467;
  --action-tertiary-active: #2A2542;
  --action-tertiary-disabled: #777777;
  --action-tertiary-alpha: #6350B314;

  /* Destructive (Laranja) */
  --action-destructive-default: #EA580C;
  --action-destructive-hover: #C2410C;
  --action-destructive-active: #9A3412;
  --action-destructive-disabled: #777777;
  --action-destructive-alpha: #F9731614;

  /* =========================================================================
     SEMÂNTICOS — CONTEXTO DE TRADING
     ========================================================================= */

  /* Candlesticks */
  --context-chart-up: #4FE290;
  --context-chart-down: #F34F45;

  /* Preço */
  --context-trading-up: #4FE290;
  --context-trading-up-alpha: #4FE29029;
  --context-trading-down: #F34F45;
  --context-trading-down-alpha: #F1312629;

  /* Long (Compra) */
  --context-trading-long-text: #6DE7A2;
  --context-trading-long-default: #4FE29014;
  --context-trading-long-hover: #4FE29029;
  --context-trading-long-active: #4FE29052;

  /* Short (Venda) */
  --context-trading-short-text: #F56D64;
  --context-trading-short-default: #F1312614;
  --context-trading-short-hover: #F1312629;
  --context-trading-short-active: #F1312652;

  /* Stop Loss */
  --context-trading-stop-default: #F97316;
  --context-trading-stop-hover: #EA580C;
  --context-trading-stop-active: #C2410C;
  --context-trading-stop-alpha: #F9731614;

  /* =========================================================================
     SCALE — ESPAÇAMENTOS RESPONSIVOS (Desktop padrão)
     ========================================================================= */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-lg: 16px;
  --spacing-xl: 20px;
  --spacing-2xl: 24px;
  --spacing-3xl: 32px;
  --spacing-3xl-2: 40px;
  --spacing-3xl-3: 48px;
  --spacing-3xl-4: 56px;
  --spacing-3xl-5: 64px;
  --spacing-3xl-6: 80px;
  --spacing-3xl-7: 96px;

  /* =========================================================================
     SCALE — BORDER RADIUS
     ========================================================================= */
  --radius-none: 0px;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-full: 9999px;

  /* =========================================================================
     FONTES
     ========================================================================= */
  --font-primary: var(--font-jetbrains-mono), 'JetBrains Mono', monospace;
  --font-secondary: var(--font-inter), 'Inter', sans-serif;
  --font-mono: var(--font-roboto-mono), 'Roboto Mono', monospace;

  /* =========================================================================
     GRADIENTES DE BRANDING (Site)
     ========================================================================= */
  --gradient-text-brand: linear-gradient(90deg, #00D4FF 0%, #FFFFFF 100%);
  --gradient-text-brand-hero: linear-gradient(90deg, #00D4FF 30%, #FFFFFF 100%);
  --gradient-bg-hero: linear-gradient(180deg, #002933 0%, #0E0E0E 40%);
  --gradient-bg-fade: linear-gradient(180deg, rgba(14,14,14,0) 0%, #0E0E0E 47%);
}

/* ==========================================================================
   LIGHT MODE
   ========================================================================== */
[data-theme="light"] {
  --bg-primary: #EEEEEE;
  --bg-secondary: #F5F5F5;
  --bg-tertiary: #FAFAFA;
  --bg-inverse: #1A1A1A;
  --bg-overlay: #FFFFFF52;
  --bg-brand: #00A8CC;
  --bg-base-alpha-0: #FFFFFF00;

  --surface-primary: #D2D2D2;
  --surface-secondary: #E8E8E8;
  --surface-tertiary: #EEEEEE;
  --surface-interactive: #29ECFF;
  --surface-disabled: #FAFAFA;
  --surface-brand: #00D4FF29;

  --content-primary: #1A1A1A;
  --content-secondary: #222222;
  --content-tertiary: #4A4A4A;
  --content-disabled: #777777;
  --content-inverse: #FFFFFF;
  --content-brand: #007D99;
  --content-info: #00A8CC;
  --content-warning: #FFC500;
  --content-placeholder: #777777;

  --border-default: #A4A4A4;
  --border-subtle: #E8E8E8;
  --border-strong: #D2D2D2;
  --border-disabled: #E8E8E8;
  --border-focus: #00D4FF;

  --action-brand-default: #00A8CC;
  --action-brand-hover: #007D99;
  --action-brand-active: #005266;
  --action-brand-inverse-default: #00A8CC;
  --action-brand-inverse-hover: #007D99;
  --action-brand-inverse-active: #005266;
}