← back to Designer Wallcoverings

DW-Agents/dw-agents/agent-marketing-nextjs/app/globals.css

76 lines

@import "tailwindcss";

:root {
  /* Dark Grey Theme */
  --background: #1e293b;
  --background-alt: #0f172a;
  --surface: #334155;
  --surface-alt: #475569;
  --foreground: #f1f5f9;
  --foreground-secondary: #cbd5e1;
  --foreground-tertiary: #94a3b8;

  /* Primary Colors */
  --primary: #60a5fa;
  --primary-light: #93c5fd;
  --primary-dark: #3b82f6;

  /* Secondary Colors */
  --secondary: #a78bfa;
  --secondary-light: #c4b5fd;

  /* Accent */
  --accent: #22d3ee;

  /* Semantic Colors */
  --success: #34d399;
  --warning: #fbbf24;
  --error: #f87171;
  --info: #60a5fa;

  /* Borders */
  --border: #475569;
  --border-light: #64748b;
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-surface: var(--surface);
  --color-primary: var(--primary);
  --color-secondary: var(--secondary);
  --color-accent: var(--accent);
  --color-success: var(--success);
  --color-warning: var(--warning);
  --color-error: var(--error);
  --color-border: var(--border);
  --font-sans: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', 'Roboto', 'Helvetica Neue', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'Monaco', 'Courier New', monospace;
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  min-height: 100vh;
}

/* Custom scrollbar for dark theme */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: var(--background-alt);
}

::-webkit-scrollbar-thumb {
  background: var(--surface);
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--surface-alt);
}