/* ==========================================================================
   KATJING FINANCE MONITOR — Base
   Reset, body defaults, and typography foundation.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Reset
-------------------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* --------------------------------------------------------------------------
   Root / Body
-------------------------------------------------------------------------- */
html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--font-normal);
  line-height: 1.5;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* --------------------------------------------------------------------------
   Typography
-------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-weight: var(--font-semibold);
  line-height: 1.25;
  color: var(--color-text);
}

h1 { font-size: var(--text-2xl); font-weight: var(--font-normal); font-family: var(--font-serif); }
h2 { font-size: var(--text-xl); }
h3 { font-size: var(--text-lg); }

p {
  color: var(--color-text-2);
  font-size: var(--text-base);
  line-height: 1.6;
}

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

/* --------------------------------------------------------------------------
   Section label (ALL CAPS heading used throughout the app)
-------------------------------------------------------------------------- */
.section-label {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--color-text-2);
  margin-bottom: 0.75rem;
}

/* --------------------------------------------------------------------------
   Divider
-------------------------------------------------------------------------- */
.divider {
  height: 0.5px;
  background: var(--color-border);
  margin: var(--gap-section) 0;
}

/* --------------------------------------------------------------------------
   Disclaimer text
   Used at the bottom of every calculated section.
-------------------------------------------------------------------------- */
.disclaimer {
  display: flex;
  align-items: flex-start;
  gap: var(--space-1);
  font-size: var(--text-sm);
  color: var(--color-text-2);
  line-height: 1.5;
  padding: var(--space-3) var(--space-6);
  border-top: 0.5px solid var(--color-border);
}

.disclaimer i {
  font-size: 13px;
  flex-shrink: 0;
  margin-top: 1px;
}

/* --------------------------------------------------------------------------
   Number formatting helper
   Apply to any element displaying a Danish-formatted number.
   Actual formatting must use Intl.NumberFormat('da-DK') in JS.
-------------------------------------------------------------------------- */
.number {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

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

/* --------------------------------------------------------------------------
   Utility: text colours
-------------------------------------------------------------------------- */
.text-primary   { color: var(--color-text); }
.text-secondary { color: var(--color-text-2); }
.text-hint      { color: var(--color-text-2); }
.text-blue      { color: var(--color-blue); }
.text-green     { color: var(--color-green); }
.text-amber     { color: var(--color-amber); }
.text-red       { color: var(--color-red); }

/* --------------------------------------------------------------------------
   Utility: font sizes
-------------------------------------------------------------------------- */
.text-xs   { font-size: var(--text-sm); }
.text-sm   { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-md   { font-size: var(--text-md); }
.text-lg   { font-size: var(--text-lg); }
.text-xl   { font-size: var(--text-xl); }
.text-2xl  { font-size: var(--text-2xl); }
.text-3xl  { font-size: var(--text-3xl); }
.text-4xl  { font-size: var(--text-4xl); }

.font-medium   { font-weight: var(--font-medium); }
.font-semibold { font-weight: var(--font-semibold); }