@import "tailwindcss";

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-border: var(--border);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-sidebar: var(--sidebar);
  --color-success: var(--success);
  --color-warning: var(--warning);
  --color-danger: var(--danger);
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

:root {
  --background: #f7f8fa;
  --foreground: #12151c;
  --card: #ffffff;
  --muted: #eef0f4;
  --muted-foreground: #5b6270;
  --border: #e1e4ea;
  --primary: #3b4fd9;
  --primary-foreground: #ffffff;
  --sidebar: #ffffff;
  --success: #15803d;
  --warning: #b45309;
  --danger: #b91c1c;
  /* Buttons: one set of colours for every screen. */
  --btn-primary: #3a5169;
  --btn-primary-fg: #ffffff;
  --btn-outline: #3a5169;
  --btn-hover: rgba(58, 81, 105, 0.1);
  --btn-grey: #dcdcdc;
  --btn-grey-fg: #34495e;
  --btn-ghost-fg: inherit;
  --btn-danger: #c93a63;
  --btn-success: #067a5d;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #0d0f14;
    --foreground: #e8eaf0;
    --card: #151821;
    --muted: #1d212c;
    --muted-foreground: #9aa2b2;
    --border: #272c39;
    --primary: #7b8cff;
    --primary-foreground: #0d0f14;
    --sidebar: #11141b;
    --success: #4ade80;
    --warning: #fbbf24;
    --danger: #f87171;
    --btn-primary: #4a6d84;
    --btn-outline: #a9c0d3;
    --btn-hover: rgba(169, 192, 211, 0.15);
    --btn-grey: #2b3342;
    --btn-grey-fg: #e6ebf0;
  }
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
}

:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* Page editor / pages list theme (self-contained; stays light in dark mode so the canvas looks the same everywhere). */
.ed {
  color-scheme: light;
  --ed-bg: #efeff1;
  --ed-ink: #34495e;
  --ed-soft: #566370;
  --ed-line: #d6dbe1;
  --ed-green: #067a5d;
  --ed-pink: #c93a63;
  --ed-dark: #3a5169;
  --ed-grey: #dcdcdc;
  --ed-blue: #4a6d84;
  --btn-primary: #3a5169;
  --btn-outline: #3a5169;
  --btn-hover: rgba(58, 81, 105, 0.1);
  --btn-grey: #dcdcdc;
  --btn-grey-fg: #34495e;
  background: var(--ed-bg);
  color: var(--ed-ink);
}
.ed :focus-visible { outline: 2px solid var(--ed-dark); outline-offset: 2px; }

/* Anything clickable shows the pointer (Tailwind's reset leaves buttons with the default arrow). */
button:not(:disabled),
[role="button"]:not([aria-disabled="true"]),
summary,
select:not(:disabled),
input[type="checkbox"]:not(:disabled),
input[type="radio"]:not(:disabled),
input[type="submit"]:not(:disabled),
label[for] {
  cursor: pointer;
}