/* Design tokens for the tasks app.
 * Five semantic colors only. Don't add a sixth without explicit discussion.
 * See docs/ui.md for the full design system. */

@theme {
  /* Semantic colors — light mode */
  --color-foreground: oklch(0.145 0 0);
  --color-muted: oklch(0.556 0.01 286);
  --color-background: oklch(1 0 0);
  --color-subtle: oklch(0.985 0.002 90);
  --color-accent: oklch(0.852 0.151 84);

  /* Modal shadow — the only shadow in the app */
  --shadow-modal: 0 20px 60px -12px rgb(0 0 0 / 0.15), 0 8px 20px -8px rgb(0 0 0 / 0.1);

  /* Project dot colors — slightly desaturated, hand-picked */
  --color-dot-blue: oklch(0.623 0.14 255);
  --color-dot-purple: oklch(0.586 0.17 295);
  --color-dot-pink: oklch(0.645 0.15 350);
  --color-dot-red: oklch(0.628 0.17 25);
  --color-dot-orange: oklch(0.702 0.15 55);
  --color-dot-yellow: oklch(0.795 0.13 85);
  --color-dot-green: oklch(0.660 0.14 155);
  --color-dot-teal: oklch(0.640 0.12 195);
  --color-dot-gray: oklch(0.650 0.01 286);
  --color-dot-brown: oklch(0.560 0.08 55);
}

@media (prefers-color-scheme: dark) {
  @theme {
    --color-foreground: oklch(0.985 0 0);
    --color-muted: oklch(0.705 0.01 286);
    --color-background: oklch(0.145 0.005 286);
    --color-subtle: oklch(0.195 0.008 286);
    --color-accent: oklch(0.852 0.151 84);

    --shadow-modal: 0 20px 60px -12px rgb(0 0 0 / 0.4), 0 8px 20px -8px rgb(0 0 0 / 0.3);
  }
}

/* Density mode CSS variable overrides */
@layer base {
  :root {
    /* Default density — Things-like on desktop */
    --density-task-py: 0.375rem; /* 6px — py-1.5 */
    --density-task-px: 0.75rem;  /* 12px — px-3 */
    --density-sidebar-py: 0.25rem; /* 4px — py-1 */
    --density-sidebar-px: 0.75rem; /* 12px — px-3 */
  }

  [data-density="comfortable"] {
    --density-task-py: 0.75rem;   /* 12px */
    --density-task-px: 1rem;      /* 16px */
    --density-sidebar-py: 0.75rem;
    --density-sidebar-px: 1rem;
  }

  [data-density="compact"] {
    --density-task-py: 0.25rem;   /* 4px */
    --density-task-px: 0.5rem;    /* 8px */
    --density-sidebar-py: 0.125rem;
    --density-sidebar-px: 0.5rem;
  }
}