/* ==========================================================================
   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-secondary: #5b6b83;
  --app-success: #17936a;
  --app-warning: #b8741a;
  --app-danger: #c8382f;
  --app-info: #1f7aa8;
  --app-purple: #6741b8;

  /* Soft tints are derived from each colour, so they follow the accent and the
     active theme automatically instead of being hand-picked per palette. The
     mix ratio matches what Settings > Appearance emits. */
  --app-soft-mix: 12%;
  --app-primary-soft: color-mix(in srgb, var(--app-primary) var(--app-soft-mix), var(--app-surface));
  --app-success-soft: color-mix(in srgb, var(--app-success) var(--app-soft-mix), var(--app-surface));
  --app-warning-soft: color-mix(in srgb, var(--app-warning) var(--app-soft-mix), var(--app-surface));
  --app-danger-soft: color-mix(in srgb, var(--app-danger) var(--app-soft-mix), var(--app-surface));
  --app-info-soft: color-mix(in srgb, var(--app-info) var(--app-soft-mix), var(--app-surface));
  --app-purple-soft: color-mix(in srgb, var(--app-purple) var(--app-soft-mix), var(--app-surface));

  /* ---- Surfaces (cool neutral ramp) ---- */
  --app-body-bg: #f6f7f9;
  --app-surface: #ffffff;
  --app-surface-muted: #f9fafb;
  --app-surface-hover: #f2f4f7;
  --app-border: #eaecf0;
  --app-border-strong: #d0d5dd;
  /* Internal dividers (card headers/footers, table rows, form sections) use
     this instead of a full-strength border so stacked rules stay quiet. The
     card's own outline keeps --app-border: it is the edge, not a divider. */
  --app-hairline: color-mix(in srgb, var(--app-border) 65%, transparent);

  /* ---- Text (same ramp, 900 → 500) ---- */
  --app-text: #1d2939;
  --app-text-muted: #475467;
  --app-text-subtle: #667085;
  --app-heading: #101828;

  /* ---- Sidebar (light skin) ---- */
  --app-sidebar-bg: #ffffff;
  --app-sidebar-border: #eaecf0;
  --app-sidebar-text: #475467;
  --app-sidebar-text-strong: #1d2939;
  --app-sidebar-muted: #667085;
  --app-sidebar-hover: #f2f4f7;
  --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: 6px;
  --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);
  /* Cards separate by elevation, not by outline: a hairline contact shadow plus
     one wide, low-opacity ambient shadow. Dark theme swaps this for a top
     highlight, because shadow is invisible on a dark surface; see themes.css. */
  --app-card-shadow: 0 1px 2px rgba(16, 26, 43, .05), 0 10px 28px -14px 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.625rem;
  --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 ---- */
  /* Easing set: --ease-out for entering/hover states, --ease-in-out for
     layout shifts, --ease-spring only for small pops. Durations: --dur-1 is
     feedback, --dur-2 is surfaces (cards, dropdowns), --dur-3 is the shell
     (drawer, sidebar, modal). Only animate transform/opacity/colour/shadow. */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --dur-1: 140ms;
  --dur-2: 200ms;
  --dur-3: 280ms;

  /* Legacy aliases — existing rules keep working; new rules use --dur-*/--ease-* */
  --app-transition-fast: var(--dur-1) var(--ease-out);
  --app-transition-normal: var(--dur-2) var(--ease-out);

  /* ---- 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.4375rem;
  --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; }
/* Larger type needs negative tracking to stay optically even; the page title is
   the only heading big enough to show it. */
h1 { font-size: var(--app-fs-page-title); letter-spacing: -.021em; }
h2 { font-size: var(--app-fs-section); letter-spacing: -.014em; }
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; }
}