src/app/globals.css

@import "tailwindcss";
@plugin "@tailwindcss/typography";

@theme {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);

  /* Override default gray palette with CSS variables for theming */
  --color-gray-50: var(--gray-50);
  --color-gray-100: var(--gray-100);
  --color-gray-200: var(--gray-200);
  --color-gray-300: var(--gray-300);
  --color-gray-400: var(--gray-400);
  --color-gray-500: var(--gray-500);
  --color-gray-600: var(--gray-600);
  --color-gray-700: var(--gray-700);
  --color-gray-800: var(--gray-800);
  --color-gray-900: var(--gray-900);
  --color-gray-950: var(--gray-950);

  /* Define Primary Palette for Buttons/Actions */
  --color-primary-50: var(--primary-50);
  --color-primary-100: var(--primary-100);
  --color-primary-200: var(--primary-200);
  --color-primary-300: var(--primary-300);
  --color-primary-400: var(--primary-400);
  --color-primary-500: var(--primary-500);
  --color-primary-600: var(--primary-600);
  --color-primary-700: var(--primary-700);
  --color-primary-800: var(--primary-800);
  --color-primary-900: var(--primary-900);
  --color-primary-950: var(--primary-950);
}

:root {
  --background: #ffffff;
  --foreground: #171717;

  /* Default Theme (Zinc) */
  --gray-50: #fafafa;
  --gray-100: #f4f4f5;
  --gray-200: #e4e4e7;
  --gray-300: #d4d4d8;
  --gray-400: #a1a1aa;
  --gray-500: #71717a;
  --gray-600: #52525b;
  --gray-700: #3f3f46;
  --gray-800: #27272a;
  --gray-900: #18181b;
  --gray-950: #09090b;

  /* Default Primary (Zinc/Neutral) */
  --primary-50: #fafafa;
  --primary-100: #f4f4f5;
  --primary-200: #e4e4e7;
  --primary-300: #d4d4d8;
  --primary-400: #a1a1aa;
  --primary-500: #71717a;
  --primary-600: #52525b;
  --primary-700: #3f3f46;
  --primary-800: #27272a;
  --primary-900: #18181b;
  --primary-950: #09090b;
}

/* Zinc Theme (Explicit) */
.theme-zinc {
  --gray-50: #fafafa;
  --gray-100: #f4f4f5;
  --gray-200: #e4e4e7;
  --gray-300: #d4d4d8;
  --gray-400: #a1a1aa;
  --gray-500: #71717a;
  --gray-600: #52525b;
  --gray-700: #3f3f46;
  --gray-800: #27272a;
  --gray-900: #18181b;
  --gray-950: #09090b;

  /* Primary: Zinc */
  --primary-50: #fafafa;
  --primary-100: #f4f4f5;
  --primary-200: #e4e4e7;
  --primary-300: #d4d4d8;
  --primary-400: #a1a1aa;
  --primary-500: #71717a;
  --primary-600: #52525b;
  --primary-700: #3f3f46;
  --primary-800: #27272a;
  --primary-900: #18181b;
  --primary-950: #09090b;
}

/* Slate Theme (Blueish) */
.theme-blue {
  --gray-50: #f0f9ff;
  --gray-100: #e0f2fe;
  --gray-200: #bae6fd;
  --gray-300: #7dd3fc;
  --gray-400: #38bdf8;
  --gray-500: #0ea5e9;
  /* Keep text neutral */
  --gray-600: #52525b;
  --gray-700: #3f3f46;
  --gray-800: #27272a;
  --gray-900: #18181b;
  --gray-950: #09090b;

  /* Primary: Sky */
  --primary-50: #f0f9ff;
  --primary-100: #e0f2fe;
  --primary-200: #bae6fd;
  --primary-300: #7dd3fc;
  --primary-400: #38bdf8;
  --primary-500: #0ea5e9;
  --primary-600: #0284c7;
  --primary-700: #0369a1;
  --primary-800: #075985;
  --primary-900: #0c4a6e;
  --primary-950: #082f49;
}

/* Green Theme (Eye Care) */
.theme-green {
  --gray-50: #ecfdf5;
  --gray-100: #d1fae5;
  --gray-200: #a7f3d0;
  --gray-300: #6ee7b7;
  --gray-400: #34d399;
  --gray-500: #10b981;
  /* Keep text neutral */
  --gray-600: #52525b;
  --gray-700: #3f3f46;
  --gray-800: #27272a;
  --gray-900: #18181b;
  --gray-950: #09090b;

  /* Primary: Emerald */
  --primary-50: #ecfdf5;
  --primary-100: #d1fae5;
  --primary-200: #a7f3d0;
  --primary-300: #6ee7b7;
  --primary-400: #34d399;
  --primary-500: #10b981;
  --primary-600: #059669;
  --primary-700: #047857;
  --primary-800: #065f46;
  --primary-900: #064e3b;
  --primary-950: #022c22;
}

/* Violet Theme (Soft Purple) */
.theme-violet {
  --gray-50: #f5f3ff;
  --gray-100: #ede9fe;
  --gray-200: #ddd6fe;
  --gray-300: #c4b5fd;
  --gray-400: #a78bfa;
  --gray-500: #8b5cf6;
  /* Keep text neutral */
  --gray-600: #52525b;
  --gray-700: #3f3f46;
  --gray-800: #27272a;
  --gray-900: #18181b;
  --gray-950: #09090b;

  /* Primary: Violet */
  --primary-50: #f5f3ff;
  --primary-100: #ede9fe;
  --primary-200: #ddd6fe;
  --primary-300: #c4b5fd;
  --primary-400: #a78bfa;
  --primary-500: #8b5cf6;
  --primary-600: #7c3aed;
  --primary-700: #6d28d9;
  --primary-800: #5b21b6;
  --primary-900: #4c1d95;
  --primary-950: #2e1065;
}

/* Amber Theme (Warm/Eye Care) */
.theme-amber {
  --gray-50: #fffbeb;
  --gray-100: #fef3c7;
  --gray-200: #fde68a;
  --gray-300: #fcd34d;
  --gray-400: #fbbf24;
  --gray-500: #f59e0b;
  /* Keep text neutral */
  --gray-600: #52525b;
  --gray-700: #3f3f46;
  --gray-800: #27272a;
  --gray-900: #18181b;
  --gray-950: #09090b;

  /* Primary: Amber */
  --primary-50: #fffbeb;
  --primary-100: #fef3c7;
  --primary-200: #fde68a;
  --primary-300: #fcd34d;
  --primary-400: #fbbf24;
  --primary-500: #f59e0b;
  --primary-600: #d97706;
  --primary-700: #b45309;
  --primary-800: #92400e;
  --primary-900: #78350f;
  --primary-950: #451a03;
}

@keyframes cursor-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* Intelligent Cursor Styling */

/* Base cursor style for the last element */
.typing-cursor-wrapper > *:last-child::after {
  content: "";
  display: inline-block;
  width: 0.5ch; /* Use ch for character width scaling */
  height: 1.2em; /* Slightly taller to match line height */
  background-color: var(--primary-500);
  margin-left: 2px;
  vertical-align: text-bottom;
  animation: cursor-blink 1s step-end infinite;
  border-radius: 1px;
}

/* Prevent double cursors on container elements */
.typing-cursor-wrapper > ul:last-child::after,
.typing-cursor-wrapper > ol:last-child::after,
.typing-cursor-wrapper > pre:last-child::after,
.typing-cursor-wrapper > table:last-child::after {
  content: none;
  display: none;
}

/* Specific cursor positioning for nested elements */
.typing-cursor-wrapper > ul:last-child > li:last-child::after,
.typing-cursor-wrapper > ol:last-child > li:last-child::after,
.typing-cursor-wrapper > pre:last-child > code::after {
  content: "";
  display: inline-block;
  width: 0.5ch;
  height: 1.2em;
  background-color: var(--primary-500);
  margin-left: 2px;
  vertical-align: text-bottom;
  animation: cursor-blink 1s step-end infinite;
  border-radius: 1px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #0a0a0a;
    --foreground: #ededed;
  }
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: Arial, Helvetica, sans-serif;
}