@import "tailwindcss";

/* Enable class-based dark mode for Tailwind v4 */
@variant dark (&:where(.dark, .dark *));

/* ── Semantic color tokens ───────────────────────────────────────────────── */
:root {
  --c-text:           #172B4D;
  --c-muted:          #5E6C84;
  --c-subtle:         #97A0AF;
  --c-surface:        #FFFFFF;
  --c-surface-raised: #FAFBFC;
  --c-surface-muted:  #F4F5F7;
  --c-border:         #DFE1E6;
  --c-brand:          #0052CC;
  --c-brand-hover:    #0065FF;
  --c-brand-focus:    #4C9AFF;
  --c-brand-tint:     #DEEBFF;
  --c-success:        #00875A;
  --c-danger:         #DE350B;
  --c-danger-dark:    #BF2600;
  --c-danger-tint:    #FFEBE6;
  --c-warning:        #FF8B00;
}

.dark {
  color-scheme: dark;
  --c-text:           #CBD5E1;
  --c-muted:          #94A3B8;
  --c-subtle:         #64748B;
  --c-surface:        #1E293B;
  --c-surface-raised: #1A2535;
  --c-surface-muted:  #0F172A;
  --c-border:         #334155;
  --c-brand:          #3B82F6;
  --c-brand-hover:    #60A5FA;
  --c-brand-focus:    #93C5FD;
  --c-brand-tint:     #1E3A5F;
  --c-success:        #34D399;
  --c-danger:         #F87171;
  --c-danger-dark:    #EF4444;
  --c-danger-tint:    #451a1a;
  --c-warning:        #FBBF24;
}

body {
  margin: 0;
  font-family: system-ui, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--c-text);
  background: var(--c-surface-raised);
}

#root {
  height: 100dvh;
}

/* Native form elements in dark mode */
.dark input,
.dark textarea,
.dark select {
  background-color: var(--c-surface);
  color: var(--c-text);
  border-color: var(--c-border);
  color-scheme: dark;
}
.dark input::placeholder,
.dark textarea::placeholder {
  color: var(--c-subtle);
}