feat: upload of the projectHEADmaster

Signed-off-by: zwlucas <lucas.fariamo08@gmail.com>

1 files changed, 274 insertions, 0 deletions

diff --git a/web/src/styles/index.css b/web/src/styles/index.css
new file mode 100644
index 0000000..8d8a3ec
--- /dev/null
+++ b/web/src/styles/index.css
@@ -0,0 +1,274 @@
+/* ============================================================================
+   HELPDESK TI — Design System Global
+   Paleta: azul profissional escuro + acentos em indigo
+   ============================================================================ */
+
+/* ─── Google Fonts fallback ───────────────────────────────────────────────── */
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
+
+/* ─── Tokens de Design ────────────────────────────────────────────────────── */
+:root {
+  /* Cores — Superfícies */
+  --color-bg:           #0f1117;
+  --color-surface:      #1a1d27;
+  --color-surface-2:    #222638;
+  --color-border:       #2e3348;
+  --color-border-hover: #454d6e;
+
+  /* Cores — Texto */
+  --color-text-primary:   #e8eaf0;
+  --color-text-secondary: #8b92a8;
+  --color-text-muted:     #555e7a;
+
+  /* Cores — Acento (Indigo) */
+  --color-accent:        #6c7ef8;
+  --color-accent-hover:  #8290fa;
+  --color-accent-subtle: rgba(108, 126, 248, 0.12);
+
+  /* Cores — Status dos Tickets */
+  --color-open:        #60a5fa;  /* Azul */
+  --color-in-progress: #a78bfa;  /* Roxo */
+  --color-waiting:     #f59e0b;  /* Âmbar */
+  --color-resolved:    #34d399;  /* Verde */
+  --color-closed:      #6b7280;  /* Cinza */
+
+  /* Cores — Prioridade */
+  --color-priority-low:      #34d399;
+  --color-priority-medium:   #60a5fa;
+  --color-priority-high:     #f59e0b;
+  --color-priority-critical: #f87171;
+
+  /* Tipografia */
+  --font-sans:  'Inter', system-ui, -apple-system, sans-serif;
+  --font-mono:  'JetBrains Mono', 'Fira Code', monospace;
+
+  --text-xs:   0.75rem;
+  --text-sm:   0.875rem;
+  --text-base: 1rem;
+  --text-lg:   1.125rem;
+  --text-xl:   1.25rem;
+  --text-2xl:  1.5rem;
+  --text-3xl:  1.875rem;
+
+  /* Espaçamento */
+  --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;
+
+  /* Border Radius */
+  --radius-sm:   0.375rem;
+  --radius-md:   0.5rem;
+  --radius-lg:   0.75rem;
+  --radius-xl:   1rem;
+  --radius-full: 9999px;
+
+  /* Sombras */
+  --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.4);
+  --shadow-md:  0 4px 12px rgba(0, 0, 0, 0.4);
+  --shadow-lg:  0 8px 32px rgba(0, 0, 0, 0.5);
+  --shadow-accent: 0 0 0 3px rgba(108, 126, 248, 0.3);
+
+  /* Transições */
+  --transition-fast:   150ms ease;
+  --transition-normal: 250ms ease;
+  --transition-slow:   400ms ease;
+
+  /* Layout */
+  --sidebar-width:  260px;
+  --header-height:  60px;
+  --content-max-w:  1200px;
+}
+
+/* ─── Reset Moderno ───────────────────────────────────────────────────────── */
+*, *::before, *::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+html {
+  font-size: 16px;
+  scroll-behavior: smooth;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+body {
+  font-family: var(--font-sans);
+  font-size: var(--text-base);
+  color: var(--color-text-primary);
+  background-color: var(--color-bg);
+  line-height: 1.6;
+  min-height: 100vh;
+}
+
+img, video {
+  max-width: 100%;
+  display: block;
+}
+
+button {
+  cursor: pointer;
+  font-family: inherit;
+  border: none;
+  background: none;
+}
+
+input, textarea, select {
+  font-family: inherit;
+  font-size: inherit;
+}
+
+a {
+  color: var(--color-accent);
+  text-decoration: none;
+  transition: color var(--transition-fast);
+}
+
+a:hover {
+  color: var(--color-accent-hover);
+}
+
+/* ─── Scrollbar customizada ───────────────────────────────────────────────── */
+::-webkit-scrollbar { width: 6px; height: 6px; }
+::-webkit-scrollbar-track { background: var(--color-surface); }
+::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: var(--radius-full); }
+::-webkit-scrollbar-thumb:hover { background: var(--color-border-hover); }
+
+/* ─── Classes utilitárias ─────────────────────────────────────────────────── */
+
+/* Badges de status dos tickets */
+.badge {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-1);
+  padding: 2px var(--space-2);
+  border-radius: var(--radius-full);
+  font-size: var(--text-xs);
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
+}
+
+.badge--open        { background: rgba(96, 165, 250, 0.15);  color: var(--color-open); }
+.badge--in_progress { background: rgba(167, 139, 250, 0.15); color: var(--color-in-progress); }
+.badge--waiting     { background: rgba(245, 158, 11, 0.15);  color: var(--color-waiting); }
+.badge--resolved    { background: rgba(52, 211, 153, 0.15);  color: var(--color-resolved); }
+.badge--closed      { background: rgba(107, 114, 128, 0.15); color: var(--color-closed); }
+
+/* Badges de prioridade */
+.badge--low      { background: rgba(52, 211, 153, 0.15);  color: var(--color-priority-low); }
+.badge--medium   { background: rgba(96, 165, 250, 0.15);  color: var(--color-priority-medium); }
+.badge--high     { background: rgba(245, 158, 11, 0.15);  color: var(--color-priority-high); }
+.badge--critical { background: rgba(248, 113, 113, 0.15); color: var(--color-priority-critical); }
+
+/* Botões */
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-2);
+  padding: var(--space-2) var(--space-4);
+  border-radius: var(--radius-md);
+  font-size: var(--text-sm);
+  font-weight: 500;
+  transition: all var(--transition-fast);
+  white-space: nowrap;
+}
+
+.btn--primary {
+  background: var(--color-accent);
+  color: #fff;
+}
+.btn--primary:hover {
+  background: var(--color-accent-hover);
+  transform: translateY(-1px);
+  box-shadow: var(--shadow-md);
+}
+
+.btn--ghost {
+  background: transparent;
+  color: var(--color-text-secondary);
+  border: 1px solid var(--color-border);
+}
+.btn--ghost:hover {
+  background: var(--color-surface-2);
+  color: var(--color-text-primary);
+  border-color: var(--color-border-hover);
+}
+
+.btn--danger {
+  background: rgba(248, 113, 113, 0.15);
+  color: var(--color-priority-critical);
+  border: 1px solid rgba(248, 113, 113, 0.3);
+}
+.btn--danger:hover {
+  background: rgba(248, 113, 113, 0.25);
+}
+
+/* Inputs */
+.input {
+  width: 100%;
+  padding: var(--space-2) var(--space-3);
+  background: var(--color-surface-2);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  color: var(--color-text-primary);
+  font-size: var(--text-sm);
+  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
+  outline: none;
+}
+
+.input:focus {
+  border-color: var(--color-accent);
+  box-shadow: var(--shadow-accent);
+}
+
+.input::placeholder {
+  color: var(--color-text-muted);
+}
+
+/* Cards */
+.card {
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  padding: var(--space-5);
+  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
+}
+
+.card:hover {
+  border-color: var(--color-border-hover);
+  box-shadow: var(--shadow-md);
+}
+
+/* Animações */
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(8px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+.animate-fade-in {
+  animation: fadeIn var(--transition-normal) ease forwards;
+}
+
+/* Loading spinner */
+.spinner {
+  width: 20px;
+  height: 20px;
+  border: 2px solid var(--color-border);
+  border-top-color: var(--color-accent);
+  border-radius: 50%;
+  animation: spin 0.7s linear infinite;
+}