/* ============================================================================
   AVFX CRM — RESET AND BASE
   ----------------------------------------------------------------------------
   Direction-neutral throughout: inline-start / inline-end, never left / right.
   See docs/decisions/ADR-0008.
   ========================================================================== */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;                 /* one variable file, every weight */
  font-display: swap;                   /* never blank the screen waiting  */
  src: url("../fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

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

* { margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  height: 100%;
}

body {
  height: 100%;
  font-family: var(--font-family);
  font-size: var(--fs-sm);
  line-height: var(--lh-base);
  font-weight: var(--fw-normal);
  color: var(--color-text-primary);
  background: var(--color-canvas);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis-weight: none;
}

/* Every number in this product lines up in its column. No exceptions.
   See docs/02-DESIGN-SYSTEM.md §4.2 */
.num, .mono, td.num, input[type="number"], .tabular {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "zero" 1;   /* tabular figures + slashed zero */
}

/* Identifiers: slashed zero, spaced out, so 0 and O cannot be confused.
   Replaces the second monospace font. See ADR-0007. */
.ident {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "zero" 1;
  letter-spacing: .04em;
  text-transform: uppercase;
}

img, svg, video, canvas { display: block; max-inline-size: 100%; }
svg { fill: none; stroke: currentColor; flex: none; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  border-radius: 0;
}
button { cursor: pointer; text-align: inherit; }
button:disabled, input:disabled, select:disabled { cursor: not-allowed; }

a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4, h5, h6 { font-weight: var(--fw-semi); line-height: var(--lh-tight); }

table { border-collapse: collapse; border-spacing: 0; }

ul, ol { list-style: none; }

hr { border: none; border-block-start: 1px solid var(--color-border); }

/* --- FOCUS ---------------------------------------------------------------
   Visible on every interactive element, in both themes, on white and on the
   dark chrome. A component that removes this fails review.               */

:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 1px;
  border-radius: var(--radius-xs);
}

::selection {
  background: var(--color-primary-subtle);
  color: var(--color-text-primary);
}

/* --- SCROLLBARS ----------------------------------------------------------
   Width and thumb colour only. Native behaviour is never broken.         */

* { scrollbar-width: thin; scrollbar-color: var(--color-scrollbar-thumb) transparent; }
*::-webkit-scrollbar { inline-size: 10px; block-size: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--color-scrollbar-thumb);
  border-radius: var(--radius-full);
  border: 2px solid transparent;
  background-clip: content-box;
}
*::-webkit-scrollbar-corner { background: transparent; }

/* --- UTILITIES ----------------------------------------------------------- */

.visually-hidden {
  position: absolute; inline-size: 1px; block-size: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.text-secondary { color: var(--color-text-secondary); }
.text-tertiary  { color: var(--color-text-tertiary); }
.text-danger    { color: var(--color-danger); }
.text-success   { color: var(--color-success); }

.pos { color: var(--color-money-positive); }
.neg { color: var(--color-money-negative); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}