index.css

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    /* Light theme — Neutral surfaces, terracotta accent */
    --background: 249 249 249;           /* Clean off-white */
    --foreground: 28 28 30;              /* Near black */

    --surface: 255 255 255;              /* Pure white for cards */
    --surface-dim: 244 244 245;          /* Slightly dimmed */
    --surface-hover: 240 240 242;        /* Hover */
    --surface-active: 232 232 235;       /* Active */

    /* Elevated surfaces (dropdowns, modals) */
    --surface-elevated: 255 255 255;
    --surface-overlay: 255 255 255;

    --border: 225 220 216;              /* Very slight warm tint */
    --border-subtle: 238 234 230;       /* Subtle warm tint */

    --muted: 118 110 105;              /* Slightly warm gray */
    --muted-foreground: 152 144 138;

    /* Primary — Terracotta */
    --primary: 218 119 86;              /* #DA7756 */
    --primary-hover: 184 85 58;         /* #B8553A (sienna) */
    --primary-foreground: 255 255 255;

    /* Semantic colors */
    --success: 34 197 94;
    --warning: 245 158 11;
    --error: 239 68 68;
    --info: 59 130 246;

    /* Card specific */
    --card: 255 255 255;
    --card-foreground: 28 28 30;

    /* Input */
    --input: 255 255 255;
    --input-border: 215 210 206;

    /* Shadows — neutral with subtle warmth */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.08), 0 1px 2px -1px rgb(0 0 0 / 0.06);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.08), 0 2px 4px -2px rgb(0 0 0 / 0.06);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.08), 0 4px 6px -4px rgb(0 0 0 / 0.06);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.06);
  }

  .dark {
    /* Dark theme — Neutral dark with warm accent */
    --background: 20 20 22;              /* Dark neutral */
    --foreground: 245 244 243;           /* Slightly warm white */

    --surface: 30 30 33;                 /* Card surface */
    --surface-dim: 24 24 27;
    --surface-hover: 44 42 46;
    --surface-active: 56 54 58;

    /* Elevated surfaces */
    --surface-elevated: 38 37 41;
    --surface-overlay: 46 44 48;

    --border: 56 53 50;                  /* Slight warm tint */
    --border-subtle: 44 42 40;

    --muted: 160 155 150;               /* Warm gray */
    --muted-foreground: 125 120 115;

    /* Primary — Warm Coral (brighter for dark mode readability) */
    --primary: 232 149 106;             /* #E8956A */
    --primary-hover: 218 119 86;        /* #DA7756 */
    --primary-foreground: 20 20 22;

    /* Semantic colors — slightly brighter */
    --success: 74 222 128;
    --warning: 251 191 36;
    --error: 248 113 113;
    --info: 96 165 250;

    /* Card */
    --card: 30 30 33;
    --card-foreground: 245 244 243;

    /* Input */
    --input: 38 37 41;
    --input-border: 56 53 50;

    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
    --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.4), 0 1px 2px -1px rgb(0 0 0 / 0.3);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.3);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.5), 0 4px 6px -4px rgb(0 0 0 / 0.4);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.5), 0 8px 10px -6px rgb(0 0 0 / 0.4);
  }

  * {
    @apply border-[rgb(var(--border))];
  }

  body {
    @apply bg-[rgb(var(--background))] text-[rgb(var(--foreground))];
    @apply antialiased;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
  }

  /* Custom scrollbar */
  ::-webkit-scrollbar {
    @apply w-2 h-2;
  }
  ::-webkit-scrollbar-track {
    @apply bg-transparent;
  }
  ::-webkit-scrollbar-thumb {
    @apply rounded-full;
    background: rgb(var(--muted-foreground) / 0.3);
  }
  ::-webkit-scrollbar-thumb:hover {
    background: rgb(var(--muted-foreground) / 0.5);
  }
}

@layer components {
  /* Card with proper elevation */
  .card {
    @apply bg-[rgb(var(--card))] rounded-xl border border-[rgb(var(--border-subtle))];
    box-shadow: var(--shadow);
  }
  
  .card-elevated {
    @apply bg-[rgb(var(--surface-elevated))] rounded-xl border border-[rgb(var(--border))];
    box-shadow: var(--shadow-lg);
  }

  /* Dropdown/Popover styles */
  .dropdown-menu {
    @apply bg-[rgb(var(--surface-overlay))] rounded-xl border border-[rgb(var(--border))];
    box-shadow: var(--shadow-xl);
  }

  /* Input styles */
  .input {
    @apply bg-[rgb(var(--input))] border border-[rgb(var(--input-border))] rounded-lg;
    @apply px-3 py-2 text-sm;
    @apply focus:outline-none focus:ring-2 focus:ring-[rgb(var(--primary))] focus:border-transparent;
    @apply placeholder:text-[rgb(var(--muted-foreground))];
  }

  /* Button base */
  .btn {
    @apply inline-flex items-center justify-center gap-2 rounded-lg font-medium;
    @apply transition-all duration-150 ease-out;
    @apply focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[rgb(var(--primary))];
    @apply disabled:opacity-50 disabled:cursor-not-allowed;
  }

  .btn-primary {
    @apply btn bg-[rgb(var(--primary))] text-[rgb(var(--primary-foreground))];
    @apply hover:bg-[rgb(var(--primary-hover))];
    @apply active:scale-[0.98];
  }

  .btn-ghost {
    @apply btn bg-transparent text-[rgb(var(--foreground))];
    @apply hover:bg-[rgb(var(--surface-hover))];
  }

  /* Sidebar */
  .sidebar {
    @apply bg-[rgb(var(--surface))] border-r border-[rgb(var(--border-subtle))];
  }

  /* Menu item */
  .menu-item {
    @apply flex items-center gap-3 px-3 py-2 rounded-lg;
    @apply text-[rgb(var(--muted))] hover:text-[rgb(var(--foreground))];
    @apply hover:bg-[rgb(var(--surface-hover))] transition-colors;
  }

  .menu-item-active {
    @apply bg-[rgb(var(--primary))/10] text-[rgb(var(--primary))];
    @apply hover:bg-[rgb(var(--primary))/15];
  }
}

@layer utilities {
  .drag-region {
    -webkit-app-region: drag;
  }
  .no-drag {
    -webkit-app-region: no-drag;
  }

  /* Text utilities */
  .text-muted {
    @apply text-[rgb(var(--muted))];
  }

  /* Surface utilities */
  .surface {
    @apply bg-[rgb(var(--surface))];
  }
  .surface-elevated {
    @apply bg-[rgb(var(--surface-elevated))];
  }

  /* Responsive auto-fill grid for cards */
  .auto-fill-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
    gap: 1.5rem;
  }

  /* Larger cards on wider screens */
  @media (min-width: 1280px) {
    .auto-fill-cards {
      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
      gap: 1.75rem;
    }
  }

  @media (min-width: 1536px) {
    .auto-fill-cards {
      grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
      gap: 2rem;
    }
  }

  @media (min-width: 1920px) {
    .auto-fill-cards {
      grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
      gap: 2rem;
    }
  }
}