@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;700&display=swap");

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

@layer components {
  .page-stack {
    @apply space-y-3;
  }

  .surface-panel {
    @apply rounded-[18px] border border-line/70 bg-surface/90 p-3 shadow-panel;
  }

  .surface-panel-tight {
    @apply rounded-[16px] border border-line/70 bg-page/60 px-3 py-2.5;
  }

  .section-kicker {
    @apply text-[11px] font-semibold uppercase tracking-[0.24em] text-muted;
  }

  .metric-kicker {
    @apply text-[11px] font-semibold uppercase tracking-[0.18em] text-muted;
  }

  .module-title {
    @apply mt-1 text-xl font-bold uppercase tracking-[0.08em] text-text;
  }
}

:root {
  color-scheme: light;
  --font-family: "Manrope";
  --color-brand: 24 90 219;
  --color-accent: 0 166 166;
  --color-surface-brand: 244 247 251;
  --color-surface: var(--color-surface-brand);
  --color-page: 248 250 252;
  --color-text: 15 23 42;
  --color-muted: 90 106 133;
  --color-line: 215 222 235;
}

.dark {
  color-scheme: dark;
  --color-brand: 63 140 255;
  --color-accent: 34 211 238;
  --color-surface: 30 41 59;
  --color-page: 2 6 23;
  --color-text: 226 232 240;
  --color-muted: 148 163 184;
  --color-line: 51 65 85;
}

html,
body,
#root {
  min-height: 100%;
}

body {
  background:
    radial-gradient(circle at top left, rgb(var(--color-brand) / 0.18), transparent 32%),
    radial-gradient(circle at top right, rgb(var(--color-accent) / 0.16), transparent 25%),
    rgb(var(--color-page));
  color: rgb(var(--color-text));
  font-family: var(--font-family), sans-serif;
}

input,
textarea,
select,
button {
  font: inherit;
}

input:not([type="color"]),
textarea,
select {
  color: rgb(var(--color-text));
}

input::placeholder,
textarea::placeholder {
  color: rgb(var(--color-muted));
}

.gantt-theme .wx-bar,
.gantt-theme .wx-task {
  fill: rgb(var(--color-brand));
}

.gantt-theme {
  --wx-font-family: var(--font-family), sans-serif;
  --wx-background: rgb(var(--color-page));
  --wx-background-alt: rgb(var(--color-surface));
  --wx-color-font: rgb(var(--color-text));
  --wx-color-secondary-font: rgb(var(--color-muted));
  --wx-color-font-disabled: rgb(var(--color-muted));
  --wx-color-link: rgb(var(--color-brand));
  --wx-color-primary: rgb(var(--color-brand));
  --wx-icon-color: rgb(var(--color-muted));
  --wx-border: 1px solid rgb(var(--color-line));
  --wx-box-shadow: 0 24px 60px rgba(15, 23, 42, 0.14);
}

.gantt-theme .wx-layout,
.gantt-theme .wx-scale,
.gantt-theme .wx-gantt,
.gantt-theme .wx-table-container {
  background-color: rgb(var(--color-page));
  color: rgb(var(--color-text));
}

.gantt-theme .wx-grid,
.gantt-theme .wx-cell,
.gantt-theme .wx-row,
.gantt-theme .wx-text,
.gantt-theme .wx-task-name {
  color: rgb(var(--color-text));
}

.gantt-theme .wx-cell,
.gantt-theme .wx-row {
  border-color: rgb(var(--color-line));
}