/*
  BP Inspections design tokens and global element defaults.
  Components should consume these tokens instead of introducing new literals.
*/
:root {
  /* Brand and semantic colors */
  --color-brand-500: #087fb5;
  --color-brand-700: #05638e;
  --color-brand-100: #e2f2f8;
  --color-brand-highlight: #39a9dc;
  --color-accent-orange: #f45125;
  --color-danger-600: #b12a35;
  --color-danger-100: #f9e4e7;
  --color-danger-border: #efc7cd;

  /* Surfaces and text */
  --surface-app: #f4f6f5;
  --surface-card: #ffffff;
  --surface-muted: #eef2f1;
  --surface-dock: #dcecf2;
  --surface-proposal: #ffffff;
  --text-primary: #10221d;
  --text-secondary: #66736f;
  --border-subtle: #d6dedb;

  /* Proposal document palette */
  --proposal-text: #1f2a30;
  --proposal-heading: #0b5f89;
  --proposal-rule: #8fb8ca;
  --proposal-rule-light: #dbe9ef;
  --proposal-rule-strong: #4f8da8;
  --proposal-callout: #eef7fb;
  --proposal-muted: #65747c;
  --proposal-accent: #087fb5;

  /* Geometry */
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 26px;
  --radius-sheet: 26px;
  --radius-pill: 999px;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;

  /* Shared dimensions */
  --header-height: 64px;
  --dock-height: 68px;
  --app-visual-top: 0px;
  --app-visual-height: 100dvh;
  --app-keyboard-inset: 0px;
  --fab-size: 58px;
  --fab-dock-gap: 20px;
  --content-max-width: 760px;
  --content-inner-max-width: calc(var(--content-max-width) - 28px);
  /* Clearance required so the final card can scroll fully above FAB and dock. */
  --bottom-safe-space: calc(
    224px + env(safe-area-inset-bottom)
  );

  /* Elevation and overlays */
  --shadow-elev-1: 0 6px 20px rgba(19, 43, 35, 0.1);
  --shadow-elev-2: 0 12px 35px rgba(19, 43, 35, 0.14);
  --shadow-elev-3: 0 18px 48px rgba(19, 43, 35, 0.2);
  --overlay-backdrop: rgba(10, 28, 35, 0.42);
  --overlay-sheet: rgba(10, 28, 35, 0.42);
  --overlay-photo: rgba(3, 12, 17, 0.9);

  /* Backward-compatible aliases while components migrate */
  --accent: var(--color-brand-500);
  --accent-strong: var(--color-brand-700);
  --accent-soft: var(--color-brand-100);
  --orange: var(--color-accent-orange);
  --bg: var(--surface-app);
  --surface: var(--surface-card);
  --surface-2: var(--surface-muted);
  --dock: var(--surface-dock);
  --text: var(--text-primary);
  --muted: var(--text-secondary);
  --border: var(--border-subtle);
  --danger: var(--color-danger-600);
  --danger-soft: var(--color-danger-100);
  --danger-border: var(--color-danger-border);
  --shadow: var(--shadow-elev-2);

  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  color-scheme: light dark;
}

html[data-theme="dark"] {
  --surface-app: #101614;
  --surface-card: #17201d;
  --surface-muted: #202a27;
  --surface-dock: #22383e;
  --text-primary: #edf5f2;
  --text-secondary: #a9b7b2;
  --border-subtle: #31403b;
  --color-brand-100: #123543;
  /* Calm destructive palette inspired by PresuCart: muted burgundy surface, soft rose text. */
  --color-danger-600: #f0b3be;
  --color-danger-100: #5a3741;
  --color-danger-border: #714650;
  --proposal-text: #e8f0f3;
  --proposal-heading: #7bc8ea;
  --proposal-rule: #486b7a;
  --proposal-rule-light: #2a3d45;
  --proposal-rule-strong: #6598ae;
  --proposal-callout: #172a33;
  --proposal-muted: #a7b6bd;
  --proposal-accent: #55b8e3;
  --overlay-backdrop: rgba(0, 0, 0, 0.58);
  --overlay-sheet: rgba(0, 0, 0, 0.58);
  --shadow-elev-1: 0 6px 20px rgba(0, 0, 0, 0.24);
  --shadow-elev-2: 0 12px 35px rgba(0, 0, 0, 0.34);
  --shadow-elev-3: 0 18px 48px rgba(0, 0, 0, 0.45);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background: var(--surface-app);
  color: var(--text-primary);
}

body {
  overscroll-behavior-y: none;
}

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

button {
  cursor: pointer;
}

button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

[hidden] {
  display: none !important;
}

.full {
  width: 100%;
}

.money {
  font-variant-numeric: tabular-nums;
  text-align: right;
}


/* Shared overlay/scroll foundation adapted from the mature PresuCart implementation. */
html.modal-locked,
body.modal-locked {
  overflow: hidden !important;
  overscroll-behavior: none;
  height: 100%;
}
body.modal-locked {
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
}
body.app-sheet-open .dock,
body.app-sheet-open .fab,
body.app-sheet-open .header-add-btn {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
body.sheet-keyboard-active::after {
  content: "";
  position: fixed;
  z-index: 89;
  left: 50%;
  bottom: 0;
  width: min(100%, var(--content-max-width));
  height: calc(var(--app-keyboard-inset, 0px) + 140px);
  transform: translateX(-50%);
  background: var(--surface);
  pointer-events: none;
}