/* ============================================
   DESIGN TOKENS — Fonte Unica de Verdade
   Todas as Custom Properties do painel.

   Table of Contents:
   1. Theme Palette
   2. Theme Derived (glow, border, bg)
   3. Legacy/CZS Variables
   4. Semantic Colors
   5. Game Colors
   6. Text Colors
   7. Background Colors
   8. Border Colors
   9. Glass Morphism
   10. Spacing Scale
   11. Border Radius
   12. Font Sizes
   13. Shadows
   14. Transitions
   15. Z-Index Scale
   16. Layout
   17. Icon Colors
   18. Misc
   ============================================ */

:root {

	/* ========== 1. THEME PALETTE ========== */
	--theme-default: #ffffff;
	--theme-default-light: #f5f5f5;
	--theme-default-rgb: 255, 255, 255;
	--theme-default-light-rgb: 245, 245, 245;

	--theme-primary: #3b82f6;
	--theme-primary-light: #60a5fa;
	--theme-primary-dark: #2563eb;
	--theme-primary-rgb: 59, 130, 246;
	--theme-primary-light-rgb: 96, 165, 250;
	--theme-primary-dark-rgb: 37, 99, 235;

	--theme-danger: #dc3545;
	--theme-danger-light: #ef4444;
	--theme-danger-rgb: 239, 68, 68;
	--theme-danger-light-rgb: 239, 68, 68;

	--theme-success: #10b981;
	--theme-success-light: #34d399;
	--theme-success-rgb: 16, 185, 129;
	--theme-success-light-rgb: 52, 211, 153;

	/* Cor de marca (logo CZS) — identidade fixa, nao acompanha o tema */
	--brand-lime: #d9ff1c;
	--brand-lime-rgb: 217, 255, 28;

	/* ========== 2. THEME DERIVED ========== */
	--theme-glow: rgba(var(--theme-primary-rgb), 0.4);
	--theme-glow-light: rgba(var(--theme-primary-rgb), 0.2);
	--theme-glow-strong: rgba(var(--theme-primary-rgb), 0.6);
	--theme-border: rgba(var(--theme-primary-rgb), 0.2);
	--theme-border-hover: rgba(var(--theme-primary-rgb), 0.35);
	--theme-border-focus: rgba(var(--theme-primary-rgb), 0.5);
	--theme-bg-subtle: rgba(var(--theme-primary-rgb), 0.08);
	--theme-bg-hover: rgba(var(--theme-primary-rgb), 0.12);
	--theme-bg-active: rgba(var(--theme-primary-rgb), 0.15);
	--theme-gradient: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-primary-light) 100%);

	/* ========== 3. LEGACY / CZS VARIABLES ========== */
	--bg-primary: color-mix(in oklab, hsl(231.429 calc(1*6.542%) 20.98% / 1) 100%, var(--theme-base-color, #000) var(--theme-base-color-amount, 0%));
	--bg-secondary: #2a2b30;
	--border-color: transparent;
	--accent-color: #0d6efd;
	--accent-color-rgb: 13, 110, 253;
	--info-color-rgb: 13, 202, 240;

	/* ============================================
	   ARKShop Pareto palette — 12 cores que concentram 48% dos usos.
	   Nomes Tailwind-style (-400/-500/-600) onde a cor bate; sufixo "-flat" para
	   variantes Flat UI. Documentar em .claude/debts.md (Audit 2). Resto das
	   cores hardcoded é débito conhecido — long tail de 1-3 usos cada.
	   ============================================ */
	--arkshop-red-500: #ef4444;            --arkshop-red-500-rgb: 239, 68, 68;
	--arkshop-red-600: #dc3545;            --arkshop-red-600-rgb: 220, 53, 69;
	--arkshop-red-flat: #e74c3c;           --arkshop-red-flat-rgb: 231, 76, 60;
	--arkshop-amber-400: #fbbf24;          --arkshop-amber-400-rgb: 251, 191, 36;
	--arkshop-amber-500: #f59e0b;          --arkshop-amber-500-rgb: 245, 158, 11;
	--arkshop-orange-400: #fb923c;         --arkshop-orange-400-rgb: 251, 146, 60;
	--arkshop-yellow-flat: #f1c40f;        --arkshop-yellow-flat-rgb: 241, 196, 15;
	--arkshop-green-500: #22c55e;          --arkshop-green-500-rgb: 34, 197, 94;
	--arkshop-green-flat: #2ecc71;         --arkshop-green-flat-rgb: 46, 204, 113;
	--arkshop-sky-400: #38bdf8;            --arkshop-sky-400-rgb: 56, 189, 248;
	--arkshop-indigo-500: #6366f1;         --arkshop-indigo-500-rgb: 99, 102, 241;
	--arkshop-blue-flat: #3498db;          --arkshop-blue-flat-rgb: 52, 152, 219;

	--primary-color: #0d6efd;
	--secondary-color: #6c757d;
	--success-color: #259511;
	--info-color: #0dcaf0;
	--warning-color: #ffc107;
	--danger-color: #dc3545;
	--light-color: #1a1c1f;
	--dark-color: #212529;

	--czs-card-border-color: #575757;
	--czs-card-box-shadow: 0 2px 5px 0px rgba(0, 0, 0, 0.20), 0 0px 4px -1px rgba(0 0 0 / 100%);

	--czs-label-color: #A1A1A1;
	--czs-dropdown-item-hover: #1e2124;

	--czs-input-bg: color-mix(in oklab, hsl(0 calc(1*0%) 0% / 0.35) 100%, hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.2) var(--theme-base-color-amount, 0%));
	--czs-input-bg-focus: color-mix(in oklab, hsl(0 calc(1*0%) 0% / 0.4) 100%, hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.2) var(--theme-base-color-amount, 0%));

	--czs-select2-bg-dropdown: #1b1c1f;
	--czs-select2-arrow-color: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23DEE2E6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
	--czs-select2-bg-dropdown-hover: #27292d;
	--czs-select2-bg-dropdown-active: var(--accent-color);
	--czs-select2-bg-dropdown-search: #161719;
	--czs-select2-padding-left: 1.25rem;

	--czs-table-bg-state: #212226;
	--czs-table-hover-bg: inset 0 0 0 9999px rgba(0 0 0 / 15%);
	--czs-table-overlay-color: rgb(24 24 28 / 90%);

	--czs-stat-box-bg: #1c1d20;
	--czs-stat-box-bg-rgb: 28, 29, 32;
	--czs-tab-content-bg: #212529;

	/* EditorJS (notas do servidor): superficies do popover de blocos */
	--czs-editorjs-popover-bg: #17181e;
	--czs-editorjs-popover-border: #353746;
	--czs-editorjs-search-bg: #131418;
	--czs-editorjs-item-hover-bg: #282a31;

	--czs-profile-info-card-steam-border-color: #2860A6;
	--czs-profile-info-card-discord-border-color: #5865F2;
	--czs-profile-info-card-battlemetrics-border-color: #F26522;
	--czs-profile-info-card-tebex-border-color: #00A8E1;

	--czs-select2-min-height: 46px;

	--btn-disabled-color: rgb(91 189 27);
	--btn-disabled-color-hover: rgb(91 189 27);

	/* ========== 4. SEMANTIC COLORS ========== */
	--color-success: #22c55e;
	--color-success-rgb: 34, 197, 94;
	--color-success-bg: rgba(34, 197, 94, 0.15);
	--color-warning: #f59e0b;
	--color-warning-rgb: 245, 158, 11;
	--color-warning-bg: rgba(245, 158, 11, 0.15);
	--color-error: #ef4444;
	--color-error-rgb: 239, 68, 68;
	--color-error-bg: rgba(239, 68, 68, 0.15);
	--color-danger: #ef4444;
	--color-danger-rgb: 239, 68, 68;
	--color-info: #3b82f6;
	--color-info-rgb: 59, 130, 246;
	--color-info-bg: rgba(59, 130, 246, 0.15);
	--color-purple: #a78bfa;
	--color-purple-rgb: 167, 139, 250;
	--color-cyan: #22d3ee;
	--color-cyan-light: #67e8f9;
	--color-cyan-rgb: 34, 211, 238;
	--color-cyan-bg: rgba(34, 211, 238, 0.15);
	--color-orange: #fb923c;
	--color-orange-light: #fdba74;
	--color-orange-rgb: 251, 146, 60;
	--color-orange-bg: rgba(251, 146, 60, 0.15);
	/* Steam brand (texto/badge claro sobre escuro) */
	--color-steam: #66c0f4;
	--color-steam-rgb: 102, 192, 244;
	/* Discord brand (badge/borda; integracao central da comunidade) */
	--color-discord: #5865f2;
	--color-discord-rgb: 88, 101, 242;
	/* EOS / Epic Online Services (identidade do jogador no ASA / cross-play) */
	--color-eos: #6366f1;
	--color-eos-rgb: 99, 102, 241;
	/* Steam brand — variante profunda (icones/fills grandes; ex: tela de usuario) */
	--color-steam-deep: #1a9fff;
	--color-steam-deep-rgb: 26, 159, 255;
	/* Google brand (badge/borda; login social) */
	--color-google: #ea4335;
	--color-google-rgb: 234, 67, 53;
	/* Gradientes de plataforma (icones de secao; mirror dos --game-*-gradient) */
	--color-steam-gradient: linear-gradient(135deg, rgba(26, 159, 255, 0.2) 0%, rgba(26, 159, 255, 0.05) 100%);
	--color-discord-gradient: linear-gradient(135deg, rgba(88, 101, 242, 0.2) 0%, rgba(88, 101, 242, 0.05) 100%);

	/* ========== 5. GAME COLORS ========== */
	--game-asa-color: #3498db;
	--game-asa-color-rgb: 52, 152, 219;
	--game-asa-color-gradient: linear-gradient(135deg, rgba(52, 152, 219, 0.2) 0%, rgba(52, 152, 219, 0.05) 100%);
	--game-ase-color: #e74c3c;
	--game-ase-color-rgb: 231, 76, 60;
	--game-ase-color-gradient: linear-gradient(135deg, rgba(231, 76, 60, 0.2) 0%, rgba(231, 76, 60, 0.05) 100%);
	--game-rust-color: #cd6133;
	--game-rust-color-rgb: 205, 97, 51;
	--game-rust-color-gradient: linear-gradient(135deg, rgba(205, 97, 51, 0.2) 0%, rgba(205, 97, 51, 0.05) 100%);
	--game-minecraft-color: #3498db;
	--game-minecraft-color-gradient: linear-gradient(135deg, rgba(52, 152, 219, 0.2) 0%, rgba(52, 152, 219, 0.05) 100%);
	--game-conan-color: #e74c3c;
	--game-conan-color-gradient: linear-gradient(135deg, rgba(231, 76, 60, 0.2) 0%, rgba(231, 76, 60, 0.05) 100%);
	--game-soulmask-color: #3498db;
	--game-soulmask-color-gradient: linear-gradient(135deg, rgba(52, 152, 219, 0.2) 0%, rgba(52, 152, 219, 0.05) 100%);
	--game-other-color: #e74c3c;
	--game-other-color-gradient: linear-gradient(135deg, rgba(231, 76, 60, 0.2) 0%, rgba(231, 76, 60, 0.05) 100%);
	--game-all-color: #3498db;
	--game-all-color-gradient: linear-gradient(135deg, rgba(52, 152, 219, 0.2) 0%, rgba(52, 152, 219, 0.05) 100%);

	/* ========== 6. TEXT COLORS ========== */
	--text-primary: #ffffff;
	--text-secondary: rgba(255, 255, 255, 0.85);
	/* --text-soft: intermediario entre secondary e muted. Use para corpo discreto
	   sobre superficies de vidro (cards do monitor, detail-items, list-check-time)
	   onde --text-muted fica AA no limite. AA-safe sobre #1c1d20 / glass cards. */
	--text-soft: rgba(255, 255, 255, 0.65);
	--text-muted: rgba(255, 255, 255, 0.5);
	--text-hint: rgba(255, 255, 255, 0.4);
	--text-placeholder: rgba(255, 255, 255, 0.35);
	--text-disabled: rgba(255, 255, 255, 0.25);

	/* ========== 7. BACKGROUND COLORS ========== */
	--bg-surface: rgba(0, 0, 0, 0.15);
	--bg-dark: rgba(0, 0, 0, 0.25);
	--bg-darker: rgba(0, 0, 0, 0.3);
	--bg-darkest: rgba(0, 0, 0, 0.4);
	--console-deep: #12121a; /* superfície funda sólida tingida (console RCON, logs, áreas de saída) */
	--bg-card: rgba(255, 255, 255, 0.03);
	--bg-deepest: #0b0d12;   /* base opaca mais funda — fundo de telas fullscreen (login) */

	/* ========== 8. BORDER COLORS ========== */
	--border-subtle: rgba(255, 255, 255, 0.06);
	--border-light: rgba(255, 255, 255, 0.08);
	--border-medium: rgba(255, 255, 255, 0.1);
	--border-primary: rgba(var(--theme-primary-rgb), 0.15);
	--border-primary-hover: rgba(var(--theme-primary-rgb), 0.25);
	--border-primary-active: rgba(var(--theme-primary-rgb), 0.4);

	/* ========== 9. GLASS MORPHISM ========== */
	--glass-bg: rgba(255, 255, 255, 0.03);
	--glass-bg-hover: rgba(255, 255, 255, 0.05);
	--glass-border: rgba(255, 255, 255, 0.06);
	/* Camada interativa "fortemente hover" para botoes/chips de ação que precisam
	   destacar acima do glass-bg-hover normal. Usado em icon-buttons sobre cards. */
	--surface-interactive-hover: rgba(255, 255, 255, 0.10);

	/* ========== 9.b ESCALA EXPANDIDA DE OPACIDADES ==========
	   Cobertura das opacidades intermediarias mais usadas em arkshop e similares.
	   Antes essas faltavam, forcando rgba() literal espalhado pelo CSS.
	   Mantem-se padronizacao semantica: text-* = foreground; glass-* = overlay
	   branco; bg-shadow-* = overlay preto. Use a mais proxima do valor desejado. */

	/* Texto branco — entre primary (1.0), secondary (0.85), soft (0.65) e muted (0.5) */
	--text-near-opaque: rgba(255, 255, 255, 0.95);  /* texto quase opaco em destaque */
	--text-strong: rgba(255, 255, 255, 0.9);        /* texto forte de cards e badges */
	--text-emphasized: rgba(255, 255, 255, 0.8);    /* texto com enfase sobre fundo escuro */
	--text-readable: rgba(255, 255, 255, 0.7);      /* texto secundario mais leve */
	--text-quiet: rgba(255, 255, 255, 0.6);         /* texto auxiliar discreto */

	/* Glass/overlay branco — entre glass-border (0.06), glass-bg-hover (0.05),
	   surface-interactive-hover (0.10) e mais fortes */
	--glass-bg-soft: rgba(255, 255, 255, 0.04);     /* glass minimo */
	--glass-bg-medium: rgba(255, 255, 255, 0.08);   /* entre hover e elevated */
	--glass-bg-elevated: rgba(255, 255, 255, 0.15); /* glass de hover forte / borders ativos */
	--glass-bg-active: rgba(255, 255, 255, 0.2);    /* estado pressionado / divisores */
	--glass-bg-vivid: rgba(255, 255, 255, 0.3);     /* highlight intenso */

	/* Sombra/overlay preto — entre bg-surface (0.15), bg-dark (0.25), bg-darker (0.3) e bg-darkest (0.4) */
	--bg-shadow-soft: rgba(0, 0, 0, 0.2);           /* sombra suave / fundo de stat-card */
	--bg-shadow-medium: rgba(0, 0, 0, 0.5);         /* sombra media */
	--bg-shadow-deep: rgba(0, 0, 0, 0.6);           /* sombra forte */

	/* ========== 10. SPACING SCALE ========== */
	--space-2xs: 0.125rem;  /* 2px */
	--space-xs: 0.25rem;    /* 4px */
	--space-sm: 0.5rem;     /* 8px */
	--space-md: 0.75rem;    /* 12px */
	--space-lg: 1rem;       /* 16px */
	--space-xl: 1.5rem;     /* 24px */
	--space-2xl: 2rem;      /* 32px */
	--space-3xl: 3rem;      /* 48px */
	--space-4xl: 4rem;      /* 64px */
	--space-5xl: 5rem;      /* 80px */
	--space-6xl: 6rem;      /* 96px */
	--space-7xl: 7rem;      /* 112px */
	--space-8xl: 8rem;      /* 128px */
	--space-9xl: 9rem;      /* 144px */
	--space-10xl: 10rem;    /* 160px */

	/* ========== 11. BORDER RADIUS ========== */
	--radius-xs: 6px;
	--radius-sm: 8px;
	--radius-md: 12px;
	--radius-lg: 16px;
	--radius-xl: 20px;
	--radius-2xl: 24px;
	--radius-3xl: 28px;
	--radius-full: 100px;

	/* ========== 12. FONT FAMILIES & SIZES ========== */
	/* Inter: UI principal — desenhada para telas, tabular nums built-in */
	--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	/* Geist Mono: console, RCON, logs, IPs, valores numericos densos */
	--font-mono: 'Geist Mono', ui-monospace, 'SF Mono', 'Cascadia Mono', 'Roboto Mono', Consolas, 'Liberation Mono', monospace;
	/* Feature settings: tabular-nums alinha numeros em tabelas/stats; cv11/ss01 ajustes finos do Inter */
	--font-features: 'cv02', 'cv03', 'cv04', 'cv11';
	--font-features-tabular: 'tnum';

	--font-size-xs: 0.75rem;   /* 12px */
	--font-size-sm: 0.875rem;  /* 14px */
	--font-size-md: 1rem;      /* 16px */
	--font-size-lg: 1.25rem;   /* 20px */
	--font-size-xl: 1.5rem;    /* 24px */
	--font-size-2xl: 2rem;     /* 32px */
	--font-size-3xl: 2.5rem;   /* 40px */
	--font-size-4xl: 3rem;     /* 48px */
	--font-size-5xl: 3.5rem;   /* 56px */
	--font-size-6xl: 4rem;     /* 64px */
	--font-size-7xl: 4.5rem;   /* 72px */
	--font-size-8xl: 5rem;     /* 80px */
	--font-size-9xl: 5.5rem;   /* 88px */
	--font-size-10xl: 6rem;    /* 96px */

	/* ========== 13. SHADOWS ========== */
	--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.15);
	--shadow-md: 0 4px 15px rgba(0, 0, 0, 0.2);
	--shadow-lg: 0 8px 25px rgba(0, 0, 0, 0.3);
	--shadow-xl: 0 12px 35px rgba(0, 0, 0, 0.4);
	--shadow-primary: 0 4px 20px rgba(var(--theme-primary-rgb), 0.3);
	--shadow-primary-lg: 0 6px 30px rgba(var(--theme-primary-rgb), 0.4);
	/* Sombra de texto para rótulo branco sobre superfície de acento (gradiente azul).
	   Duas camadas: a 1ª encorpa (deslocada), a 2ª fecha o contorno do glifo (halo curto)
	   pra ganhar nitidez na ponta clara do gradiente, sem mudar a cor. */
	--text-shadow-on-accent: 0 1px 3px rgba(0, 0, 0, 0.55), 0 0 1px rgba(0, 0, 0, 0.55);
	/* Anel de foco padrão para inputs, dropdowns, controles focáveis (Bootstrap-like).
	   Usa cor de tema, leve o suficiente para não competir com a borda primária. */
	--focus-ring-primary: 0 0 0 0.25rem rgba(var(--theme-primary-rgb), 0.12);

	/* ========== 14. TRANSITIONS ========== */
	--transition-fast: 0.15s ease;
	--transition-base: 0.2s ease;
	--transition-smooth: 0.3s cubic-bezier(0.16, 1, 0.3, 1);
	--transition-smooth-fast: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
	--transition-bounce: 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);

	/* ========== 15. Z-INDEX SCALE ========== */
	--z-deep: -1;
	--z-base: 0;
	--z-raised: 1;
	--z-dropdown: 100;
	--z-sticky: 500;
	--z-header: 1000;
	--z-sidebar: 1030;
	--z-modal-backdrop: 1050;
	--z-modal: 1060;
	--z-toast: 1080;
	--z-tooltip: 1100;
	--z-max: 9999;

	/* ========== 16. LAYOUT ========== */
	--sidebar-width: 320px;
	--sidebar-collapsed-width: 70px;
	--header-height: 60px;
	--footer-height: 58px;

	/* ========== 17. ICON COLORS ========== */
	--icon-mysql: #0088cc;
	--icon-points: #2ecc71;
	--icon-lottery: #ffb703;
	--icon-ui: #9b59b6;
	--icon-shop: #3498db;
	--icon-kit: #e67e22;
	--icon-sell: #1abc9c;
	--icon-message: #f1c40f;
	--icon-notification: #e74c3c;
	--icon-log: #95a5a6;
	--icon-discount: #e74c3c;
	--icon-steal: #c0392b;

	/* ========== 18. MISC ========== */
	--sweetalert2-width: 50em;

}