/* ==========================================================================
   Asign Portal — Base
   --------------------------------------------------------------------------
   Font loading, a light modern reset, and base element defaults.
   Load order on every page:  tokens.css  ->  base.css  ->  typography.css
   ->  (component / page css).  Requires tokens.css for the custom properties.
   ========================================================================== */

/* Fonts — Manrope (headings + body) and Quicksand (buttons/links).
   Domine is intentionally not loaded: the portal UI doesn't use serif body.
   For best performance add these two lines to each page's <head> as well:
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> */
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Quicksand:wght@500;600;700&display=swap");

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

* {
  margin: 0;
}

/* The hidden attribute must win even when a class sets display (e.g. .empty-state) */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  min-height: 100vh;
  font-family: var(--font-sans);
  font-size: var(--text-body-size);      /* 15px — Figma Body/Base */
  line-height: var(--text-body-lh);      /* 22px */
  font-weight: var(--weight-regular);
  color: var(--color-text);
  background-color: var(--color-surface-alt);
  text-rendering: optimizeLegibility;

}

/* Media defaults */
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

/* Form controls inherit type */
input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

/* Long words / URLs shouldn't blow out layouts */
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

/* --------------------------------------------------------------------------
   Base element styling
   -------------------------------------------------------------------------- */

/* Links — brand rule: action typeface, distinct colour, underlined.
   (Utility/nav links that shouldn't look like text links opt out with a class.) */
a {
  font-family: var(--font-action);
  font-weight: var(--weight-semibold);
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--duration-fast) var(--ease-standard);
}

a:hover {
  color: var(--color-primary-hover);
}

a:active {
  color: var(--color-primary-dark);
}

/* Buttons: strip native chrome; visual styles live in a component stylesheet */
button {
  font-family: var(--font-action);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
}

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

::selection {
  background: var(--color-tint-blue);
  color: var(--color-navy);
}

/* --------------------------------------------------------------------------
   Accessibility
   -------------------------------------------------------------------------- */

/* Visible focus for keyboard users only */
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: var(--focus-ring-offset);
  border-radius: var(--radius-sm);
}

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

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