/* ==========================================================================
   variables.css — Design tokens + base typography
   Every reusable value lives here. Rebrand the whole template from this file.
   ========================================================================== */

:root {
  /* ---- Brand & status colours ---- */
  --app-primary: #2f5bd7;
  --app-primary-hover: #2549b1;
  --app-primary-soft: #eaf0ff;
  --app-secondary: #5b6b83;
  --app-success: #17936a;
  --app-success-soft: #e4f5ef;
  --app-warning: #b8741a;
  --app-warning-soft: #fbf0df;
  --app-danger: #c8382f;
  --app-danger-soft: #fceceb;
  --app-info: #1f7aa8;
  --app-info-soft: #e6f3fa;
  --app-purple: #6741b8;
  --app-purple-soft: #efeafc;

  /* ---- Surfaces ---- */
  --app-body-bg: #f4f6f9;
  --app-surface: #ffffff;
  --app-surface-muted: #f8fafc;
  --app-surface-hover: #f1f5f9;
  --app-border: #e3e8ef;
  --app-border-strong: #cfd6e0;

  /* ---- Text ---- */
  --app-text: #17233a;
  --app-text-muted: #64748b;
  --app-text-subtle: #8a96a8;
  --app-heading: #0f1c33;

  /* ---- Sidebar (light skin) ---- */
  --app-sidebar-bg: #ffffff;
  --app-sidebar-border: #e3e8ef;
  --app-sidebar-text: #47566b;
  --app-sidebar-text-strong: #17233a;
  --app-sidebar-muted: #8a96a8;
  --app-sidebar-hover: #f1f5f9;
  --app-sidebar-active-bg: var(--app-primary-soft);
  --app-sidebar-active-text: var(--app-primary);

  /* ---- Dimensions ---- */
  --app-sidebar-width: 266px;
  --app-sidebar-collapsed-width: 76px;
  --app-header-height: 62px;
  --app-content-max: 1400px;

  /* ---- Radius ---- */
  --app-radius-sm: 5px;
  --app-radius-md: 8px;
  --app-radius-lg: 12px;
  --app-radius-pill: 999px;

  /* ---- Shadows ---- */
  --app-shadow-xs: 0 1px 2px rgba(16, 26, 43, .06);
  --app-shadow-sm: 0 1px 3px rgba(16, 26, 43, .08), 0 1px 2px rgba(16, 26, 43, .04);
  --app-shadow-md: 0 6px 18px rgba(16, 26, 43, .09);
  --app-shadow-lg: 0 18px 44px rgba(16, 26, 43, .16);

  /* ---- Spacing scale ---- */
  --app-gap-xs: .375rem;
  --app-gap-sm: .625rem;
  --app-gap-md: 1rem;
  --app-gap-lg: 1.5rem;
  --app-gap-xl: 2rem;
  --app-page-padding: 1.5rem;
  --app-card-padding: 1.15rem 1.25rem;

  /* ---- Typography ---- */
  --app-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --app-font-mono: "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
  --app-fs-page-title: 1.375rem;
  --app-fs-section: 1.0625rem;
  --app-fs-card-title: .9375rem;
  --app-fs-body: .875rem;
  --app-fs-sm: .8125rem;
  --app-fs-caption: .75rem;
  --app-lh-body: 1.55;

  /* ---- Motion ---- */
  --app-transition-fast: 120ms ease;
  --app-transition-normal: 220ms cubic-bezier(.4, 0, .2, 1);

  /* ---- Bootstrap bridge (keeps BS components on-brand) ---- */
  --bs-primary: var(--app-primary);
  --bs-primary-rgb: 47, 91, 215;
  --bs-body-font-family: var(--app-font);
  --bs-body-font-size: var(--app-fs-body);
  --bs-body-color: var(--app-text);
  --bs-body-bg: var(--app-body-bg);
  --bs-border-color: var(--app-border);
  --bs-border-radius: var(--app-radius-md);
  --bs-link-color: var(--app-primary);
  --bs-link-hover-color: var(--app-primary-hover);
}

/* Density: compact mode for data-heavy enterprise screens */
[data-density="compact"] {
  --app-page-padding: 1.1rem;
  --app-card-padding: .85rem 1rem;
  --app-fs-body: .8125rem;
  --app-fs-page-title: 1.25rem;
  --app-gap-lg: 1.1rem;
  --app-header-height: 56px;
}

/* ==========================================================================
   Base / reset layer
   ========================================================================== */
* { -webkit-tap-highlight-color: transparent; }

html, body { height: 100%; }

body.app-body {
  font-family: var(--app-font);
  font-size: var(--app-fs-body);
  line-height: var(--app-lh-body);
  color: var(--app-text);
  background: var(--app-body-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 { color: var(--app-heading); font-weight: 600; letter-spacing: -.01em; }
h1 { font-size: var(--app-fs-page-title); }
h2 { font-size: var(--app-fs-section); }
h3, h4 { font-size: var(--app-fs-card-title); }
p { margin-bottom: .75rem; }
small, .text-caption { font-size: var(--app-fs-caption); }
a { text-decoration: none; }
a:hover { text-decoration: none; }
code, kbd, pre { font-family: var(--app-font-mono); }

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

.skip-link {
  position: absolute; top: .5rem; left: .5rem; z-index: 1080;
  background: var(--app-surface); padding: .5rem .875rem; border-radius: var(--app-radius-md);
  box-shadow: var(--app-shadow-md);
}

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--app-border-strong); border-radius: var(--app-radius-pill); }
::-webkit-scrollbar-thumb:hover { background: var(--app-text-subtle); }

/* ==========================================================================
   Small global utilities (project-specific, prefixed to avoid BS clashes)
   ========================================================================== */
.text-muted { color: var(--app-text-muted) !important; }
.text-subtle { color: var(--app-text-subtle); }
.fw-medium { font-weight: 500; }
.fs-caption { font-size: var(--app-fs-caption); }
.fs-sm { font-size: var(--app-fs-sm); }
.mono { font-family: var(--app-font-mono); font-size: var(--app-fs-sm); }
.cursor-pointer { cursor: pointer; }
.border-app { border: 1px solid var(--app-border) !important; }
.bg-surface { background: var(--app-surface) !important; }
.bg-surface-muted { background: var(--app-surface-muted) !important; }
.rounded-app { border-radius: var(--app-radius-md) !important; }
.min-w-0 { min-width: 0; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Money + date primitives (reusable formatting components) */
.money { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--app-heading); white-space: nowrap; }
.money-negative { color: var(--app-danger); }
.money-positive { color: var(--app-success); }
.money-sub { font-weight: 500; color: var(--app-text-muted); }
.datetime { font-variant-numeric: tabular-nums; white-space: nowrap; }
.datetime-rel { color: var(--app-text-muted); font-size: var(--app-fs-caption); }

@media print {
  .app-sidebar, .app-header, .app-footer, .page-header-actions, .filter-bar,
  .no-print, .toast-container, .sidebar-backdrop { display: none !important; }
  .app-main { margin: 0 !important; }
  .app-content { padding: 0 !important; }
  .card { border: none !important; box-shadow: none !important; }
  body { background: #fff; }
}