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

/*
  Shared BookTraq theme primitives.
  Load order for apps:
  1. SharedTheme/styles.css
  2. SharedTheme/components.css
  3. app-local styles.css
*/

:root {
  --theme-bg: #0d0f12;
  --theme-surface: #13171e;
  --theme-surface-alt: #1a1f2a;
  --theme-border: #252c38;
  --theme-text: #e8edf5;
  --theme-muted: #7d8799;
  --theme-accent: #00e5a0;
  --theme-accent-2: #0077ff;
  --theme-accent-contrast: #000000;
  --theme-success: var(--theme-accent);
  --theme-warn: #ffb800;
  --theme-danger: #ff4d6a;
  --theme-shadow: none;
  --theme-font-heading: "Syne", system-ui, sans-serif;
  --theme-font-body: "Syne", system-ui, sans-serif;
  --theme-font-mono: "DM Mono", monospace;
  --theme-radius-sm: 6px;
  --theme-radius-md: 8px;
  --theme-radius-lg: 10px;
  --theme-card-padding: 24px;
  --theme-field-bg: var(--theme-surface-alt);
  --theme-field-text: var(--theme-text);
  --theme-table-max-height: 420px;
  --theme-table-header-bg: var(--theme-surface-alt);
  --theme-table-row-hover: rgba(255, 255, 255, 0.04);
}

body[data-theme="light"] {
  --theme-bg: #f4f7fb;
  --theme-surface: #ffffff;
  --theme-surface-alt: #eef3f9;
  --theme-border: #ced7e4;
  --theme-text: #152033;
  --theme-muted: #59667d;
  --theme-accent: #047857;
  --theme-accent-2: #2563eb;
  --theme-accent-contrast: #ffffff;
  --theme-success: #047857;
  --theme-warn: #b7791f;
  --theme-danger: #c53030;
  --theme-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
  --theme-field-bg: #f8fbff;
  --theme-field-text: #152033;
  --theme-table-header-bg: #e9f0f8;
  --theme-table-row-hover: rgba(37, 99, 235, 0.05);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  background: var(--theme-bg);
  color: var(--theme-text);
  font-family: var(--theme-font-body);
  font-size: 24px;
  line-height: 1.55;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(color-mix(in srgb, var(--theme-accent) 10%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--theme-accent) 10%, transparent) 1px, transparent 1px);
  background-size: 40px 40px;
}

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

table {
  width: 100%;
  border-collapse: collapse;
}

[hidden] {
  display: none !important;
}