/*
 * TeeLegend Portal — variables.css v6 DARK RETRO CHAMFER
 * Arcade RPG dashboard: dark base, neon accents, chamfered corners.
 */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=DM+Mono:wght@400;500;600&family=Orbitron:wght@600;700;900&family=Rajdhani:wght@400;500;600;700&display=swap');

:root {

  /* ── Brand Blue ──────────────────────────────────────── */
  --color-brand-blue:        #4f8ef5;
  --color-brand-blue-bright: #60a5fa;
  --color-brand-blue-dark:   #2563eb;
  --color-brand-blue-glow:   rgba(79, 142, 245, 0.35);
  --color-brand-blue-subtle: rgba(79, 142, 245, 0.10);
  --color-brand-blue-light:  rgba(79, 142, 245, 0.15);

  /* ── XP / Level Purple ───────────────────────────────── */
  --color-xp:                #8b5cf6;
  --color-xp-bright:         #a78bfa;
  --color-xp-glow:           rgba(139, 92, 246, 0.40);
  --color-xp-subtle:         rgba(139, 92, 246, 0.12);
  --color-xp-border:         rgba(139, 92, 246, 0.30);

  /* ── Neon Cyan ───────────────────────────────────────── */
  --color-neon-cyan:         #22d3ee;
  --color-neon-cyan-glow:    rgba(34, 211, 238, 0.30);
  --color-neon-cyan-subtle:  rgba(34, 211, 238, 0.10);

  /* ── Backgrounds (DARK) ──────────────────────────────── */
  --color-bg-app:            #000512;
  --color-bg-card:           #05091b;
  --color-bg-card-2:         #05091b;
  --color-bg-card-hover:     #202840;
  --color-bg-header:         #01030f;
  --color-bg-input:          #1c2235;
  --color-bg-overlay:        rgba(0, 0, 0, 0.80);
  --color-bg-hero:           linear-gradient(135deg, #16203a 0%, #1a1840 50%, #0f1a30 100%);

  /* ── Sidebar ─────────────────────────────────────────── */
  --color-bg-sidebar:        #080c1a;
  --color-bg-sidebar-hover:  rgba(255, 255, 255, 0.05);
  --color-bg-sidebar-active: rgba(79, 142, 245, 0.15);
  --color-sidebar-divider:   rgba(255, 255, 255, 0.06);
  --color-text-on-dark:      #c8d8f0;
  --color-text-on-dark-muted:#3d5070;

  /* ── Borders ─────────────────────────────────────────── */
  --color-border:            #4a525b;
  --color-border-strong:     rgba(255, 255, 255, 0.13);
  --color-border-focus:      var(--color-brand-blue);
  --color-border-glow:       rgba(79, 142, 245, 0.25);

  /* ── Text ────────────────────────────────────────────── */
  --color-text-primary:      #ffffff;
  --color-text-secondary:    #d3d6da;
  --color-text-muted:        #a1a8b1;
  --color-text-link:         var(--color-brand-blue);

  /* ── Semânticas ──────────────────────────────────────── */
  --color-success:           #00c83c;
  --color-success-bg:        rgba(52, 211, 153, 0.12);
  --color-success-border:    rgba(52, 211, 153, 0.25);
  --color-danger:            #ee2332;
  --color-danger-bg:         rgba(248, 113, 113, 0.12);
  --color-danger-border:     rgba(248, 113, 113, 0.25);
  --color-warning:           #fbbf24;
  --color-warning-bg:        rgba(251, 191, 36, 0.12);
  --color-warning-border:    rgba(251, 191, 36, 0.25);
  --color-info:              var(--color-brand-blue);
  --color-info-bg:           var(--color-brand-blue-subtle);
  --color-info-border:       var(--color-border-glow);

  /* ── Gamificação ─────────────────────────────────────── */
  --color-gold:              #f59e0b;
  --color-gold-glow:         rgba(245, 158, 11, 0.45);
  --color-gold-bg:           rgba(245, 158, 11, 0.12);
  --color-silver:            #94a3b8;
  --color-silver-glow:       rgba(148, 163, 184, 0.30);
  --color-silver-bg:         rgba(148, 163, 184, 0.10);
  --color-bronze:            #f97316;
  --color-bronze-glow:       rgba(249, 115, 22, 0.40);
  --color-bronze-bg:         rgba(249, 115, 22, 0.12);
  --color-badge-secret:      #a855f7;
  --color-badge-secret-glow: rgba(168, 85, 247, 0.45);
  --color-badge-secret-bg:   rgba(168, 85, 247, 0.12);

  /* ── Sombras ─────────────────────────────────────────── */
  --shadow-xs:   0 1px 3px rgba(0,0,0,0.40);
  --shadow-sm:   0 2px 6px rgba(0,0,0,0.50);
  --shadow-md:   0 4px 16px rgba(0,0,0,0.55);
  --shadow-lg:   0 8px 28px rgba(0,0,0,0.65);
  --shadow-card: 0 1px 3px rgba(0,0,0,0.50), 0 0 0 1px rgba(255,255,255,0.05);
  --shadow-card-hover: 0 4px 24px rgba(79,142,245,0.18), 0 0 0 1px rgba(79,142,245,0.22);
  --shadow-sidebar: 4px 0 28px rgba(0,0,0,0.60);

  --glow-blue:    0 0 24px rgba(79,142,245,0.35);
  --glow-gold:    0 0 24px rgba(245,158,11,0.45);
  --glow-green:   0 0 24px rgba(52,211,153,0.30);
  --glow-purple:  0 0 24px rgba(139,92,246,0.40);
  --glow-cyan:    0 0 24px rgba(34,211,238,0.30);
  --glow-danger:  0 0 24px rgba(248,113,113,0.35);

  --shadow-badge-gold:   0 4px 24px rgba(245,158,11,0.55), 0 8px 32px rgba(0,0,0,0.30);
  --shadow-badge-blue:   0 4px 24px rgba(79,142,245,0.45), 0 8px 32px rgba(0,0,0,0.30);
  --shadow-badge-secret: 0 4px 24px rgba(168,85,247,0.50), 0 8px 32px rgba(0,0,0,0.30);

  /* ── Tipografia ──────────────────────────────────────── */
  --font-ui:      'DM Sans', system-ui, -apple-system, sans-serif;
  --font-data:    'DM Mono', 'Courier New', monospace;
  --font-display: 'Orbitron', 'DM Mono', monospace;
  --font-hud:     'Rajdhani', 'DM Sans', sans-serif;   /* KPIs, valores nos cards */

  --text-xs:      11px;
  --text-sm:      0.875rem;
  --text-base:    1rem;
  --text-lg:      1.125rem;
  --text-xl:      1.25rem;
  --text-2xl:     1.5rem;
  --text-3xl:     1.875rem;
  --text-4xl:     2.25rem;
  --text-5xl:     3rem;

  --weight-normal:   400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  --leading-tight:   1.25;
  --leading-normal:  1.5;
  --leading-relaxed: 1.625;

  /* ── Layout ──────────────────────────────────────────── */
  --sidebar-width:           220px;
  --sidebar-width-collapsed: 60px;
  --header-height:           64px;
  --dashboard-right-width:   300px;
  --content-max-width:       1600px;
  --content-padding:         15px;
  --card-padding:            15px;

  /* ── Espaçamentos ────────────────────────────────────── */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* ── Raios (mantidos para compatibilidade com elementos pequenos) ── */
  --radius-sm:   3px;
  --radius-md:   4px;
  --radius-lg:   6px;
  --radius-xl:   8px;
  --radius-pill: 999px;

  /* ── Chamfer (cortes a 45° — corner-shape: bevel) ───────── */
  /*
   * corner-shape: bevel + border-radius: Npx = canto cortado a 45°
   * Vantagem: box-shadow, border e outline seguem o corte normalmente.
   * Suporte: Chrome 139+ / Chromium (portal é desktop-only, OK).
   * Fallback @supports: cantos ligeiramente arredondados.
   */
  --chamfer-xs:  4px;    /* botões, badges, avatares */
  --chamfer-sm:  8px;    /* KPI cards, items pequenos */
  --chamfer-md:  8px;   /* cards normais */
  --chamfer-lg:  14px;   /* hero, painéis grandes */
  --chamfer-xl:  14px;   /* modals */

  /* ── Transições ──────────────────────────────────────── */
  --transition-fast:    150ms ease;
  --transition-base:    250ms ease;
  --transition-slow:    400ms ease;
  --transition-spring:  350ms cubic-bezier(0.34, 1.56, 0.64, 1);
  --transition-sidebar: 280ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Z-index ─────────────────────────────────────────── */
  --z-base:       1;
  --z-sidebar:    100;
  --z-header:     90;
  --z-dropdown:   200;
  --z-modal:      300;
  --z-overlay:    400;
  --z-badge-anim: 500;
}

body.sidebar-collapsed { --sidebar-width: var(--sidebar-width-collapsed); }