/* ==========================================================================
   EasyInvoice — Base Styles
   Load order: tokens.css -> base.css -> components/*.css -> screens/*.css
   This file resets the browser defaults, sets global element behavior, and
   defines the typographic utility classes referenced throughout the
   Component Library (Frontend Product Spec, Section 5). It contains no
   component-specific or screen-specific styling.
   ========================================================================== */

/* ------------------------------------------------------------------ */
/* Reset                                                                */
/* ------------------------------------------------------------------ */

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

html,
body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd {
  margin: 0;
}

html {
  /* Respects OS-level text scaling — never override with a fixed px root size */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

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

#app {
  min-height: 100dvh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.app-main {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  overflow-y: auto;
}

#app[data-flow="tabs"] .app-main {
  padding-bottom: calc(var(--tabbar-height) + var(--space-6) + env(safe-area-inset-bottom, 0px));
}

/* Author `display:` rules otherwise override the hidden attribute
   (e.g. flex theme/status rows staying visible on Preview). */
[hidden] {
  display: none !important;
}

ul[role="list"],
ol[role="list"] {
  list-style: none;
  margin: 0;
  padding: 0;
}

img,
picture,
svg {
  display: block;
  max-width: 100%;
}

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

button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  text-align: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

/* ------------------------------------------------------------------ */
/* Global element defaults                                             */
/* ------------------------------------------------------------------ */

body {
  font-family: var(--font-ui);
  font-size: var(--text-body);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--color-ink);
  background-color: var(--color-paper-dim);
  -webkit-font-smoothing: antialiased;
}

/* Money and other data-dense figures always use the mono face wherever
   this class is applied — see Frontend Spec Section 1.4 / 2.2. */
.mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------ */
/* Typography utility classes (map 1:1 to the type scale tokens)        */
/* ------------------------------------------------------------------ */

.text-display {
  font-size: var(--text-display);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
}

.text-h1 {
  font-size: var(--text-h1);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
}

.text-h2 {
  font-size: var(--text-h2);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
}

.text-body {
  font-size: var(--text-body);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
}

.text-small {
  font-size: var(--text-small);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--color-ink-muted);
}

.text-micro {
  font-size: var(--text-micro);
  font-weight: var(--weight-medium);
  line-height: var(--leading-tight);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--color-ink-muted);
}

.text-mono-lg {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-mono-lg);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
}

.text-mono-body {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-mono-body);
  font-weight: var(--weight-medium);
  line-height: var(--leading-normal);
}

.text-muted {
  color: var(--color-ink-muted);
}

.text-faint {
  color: var(--color-ink-faint);
}

.text-brand {
  color: var(--color-brand);
}

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

/* ------------------------------------------------------------------ */
/* Focus states — visible everywhere, including touch-primary screens,  */
/* since it costs nothing now and directly benefits the sm+/desktop     */
/* scale-up path later. See Frontend Spec Section 9.                    */
/* ------------------------------------------------------------------ */

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

/* Remove the default focus ring only where a component supplies its own
   equivalent visible focus treatment (documented per-component). */
.focus-managed:focus {
  outline: none;
}

/* ------------------------------------------------------------------ */
/* Overlay scrollbar — no reserved gutter, hidden until scroll/hover,   */
/* then fades. See Frontend Spec Section 3.3.                           */
/* ------------------------------------------------------------------ */

* {
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}

.is-scrolling,
*:hover {
  scrollbar-color: rgba(14, 124, 102, 0.35) transparent;
}

*::-webkit-scrollbar {
  width: 4px;
  height: 4px;
  background: transparent;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background-color: transparent;
  border-radius: 999px;
}

.is-scrolling::-webkit-scrollbar-thumb,
.is-scrolling *::-webkit-scrollbar-thumb,
*:hover::-webkit-scrollbar-thumb {
  background-color: rgba(14, 124, 102, 0.35);
}

/* ------------------------------------------------------------------ */
/* Layout helpers used across screens                                   */
/* ------------------------------------------------------------------ */

.screen {
  max-width: var(--content-max-width-sm);
  margin-inline: auto;
  padding-inline: var(--screen-padding-x);
}

@media (min-width: 900px) {
  .screen {
    max-width: var(--content-max-width-md);
  }
}

/* Respects notched/gesture-bar phones for any element pinned to the
   bottom of the viewport (sticky CTA bar, bottom tab bar, FAB). */
.safe-bottom {
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.sticky-footer {
  position: sticky;
  bottom: 0;
  z-index: 15;
  background-color: var(--color-paper);
  border-top: 1px solid var(--color-border);
  box-shadow: var(--shadow-sheet);
  padding: var(--space-4);
}

#app > .sticky-footer {
  position: relative;
  flex-shrink: 0;
}

#app > .sticky-footer.safe-bottom {
  padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
}

#app > .sticky-footer > .btn {
  width: 100%;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------------------------ */
/* Dashed divider — the receipt-tear motif used sparingly on the        */
/* Invoice Preview Card only. See Frontend Spec Section 1.4 / 5.8.      */
/* ------------------------------------------------------------------ */

.divider-dashed {
  border: none;
  border-top: 1px dashed var(--color-border);
  margin: var(--space-4) 0;
}

/* ------------------------------------------------------------------ */
/* Loading skeleton pulse — used by in-line content loading states.     */
/* See Frontend Spec Section 5.14.                                      */
/* ------------------------------------------------------------------ */

@keyframes skeleton-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

.skeleton {
  background-color: var(--color-paper-dim);
  border-radius: var(--radius-sm);
  animation: skeleton-pulse 1.5s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .skeleton {
    animation: none;
  }
}