/*
 * Meliora's brand typeface National 2 (Klim Type Foundry, web licence held by Meliora), self-hosted.
 * Three static cuts cover every weight the designs ask for (they were drawn on a variable font, 400–800):
 * each face claims a weight range, so the browser always picks a real cut and never synthesises bold.
 *   400–549 Regular · 550–849 Bold · 850–900 Extrabold
 * National runs darker than the variable font the designs were drawn on, so their display headings
 * (750–800) take Bold; Extrabold is kept for anything that asks for 850+ (nothing does yet, so it is
 * never downloaded).
 * No italics on the site: National has no italic cut and the browser must not slant one (font-synthesis),
 * so whatever the designs set in italic, accent words included (--font-serif), is drawn upright.
 * Arrows (→ ← ↗) are not in the font and come from the system fallback in --font-sans (tokens.css).
 */
:root {
  font-synthesis: none;
}

@font-face {
  font-family: 'National 2';
  src: url('/_astro/national-2-regular.C1Fg3MuS.woff2') format('woff2');
  font-weight: 400 549;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'National 2';
  src: url('/_astro/national-2-bold.D0FTgq9S.woff2') format('woff2');
  font-weight: 550 849;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'National 2';
  src: url('/_astro/national-2-extrabold.X573Pxdj.woff2') format('woff2');
  font-weight: 850 900;
  font-style: normal;
  font-display: swap;
}
/*
 * Meliora design tokens — 1:1 with the client portal (meliora-portal/resources/css/app.css).
 * Source: docs/research/portal-design-tokens.md. Do not add arbitrary hex values in components;
 * extend this file instead.
 */
:root {
  /* Typography */
  --font-sans: 'National 2', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* Accent words (once a serif italic) are set in the brand sans, upright: see fonts.css. */
  --font-serif: var(--font-sans);
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
  --tracking-heading: -0.025em;
  --tracking-display: -0.04em;
  --tracking-eyebrow: 0.08em;

  /* Surfaces & text */
  --color-paper: #f6f4f1;
  --color-surface: #ffffff;
  --color-line: #e8e4df;
  --color-ink: #16161a;
  --color-ink-soft: #3d3b40;
  --color-muted: #6b665f;

  /* Brand: the coral thread (niť) — lines, arcs, dots, small badges only; never large areas */
  --color-coral: #f5a6a6;
  --color-coral-strong: #d65f66; /* icons/lines only (3.69:1 on white) */
  --color-coral-text: #b3424a;   /* coral text on white */
  --color-coral-wash: #fdeeec;

  /* Status palette: dot / text / wash */
  --color-waiting: #d65f66;
  --color-waiting-text: #a93a43;
  --color-waiting-wash: #fdeeec;
  --color-progress: #5b5fe0;
  --color-progress-text: #4145c4;
  --color-progress-wash: #ecedfd;
  --color-done: #2f8f68;
  --color-done-text: #22694c;
  --color-done-wash: #e7f3ec;
  --color-new: #a8a29a;
  --color-new-text: #57534e;
  --color-new-wash: #f0eeea;
  --color-soon: #d08a1c;
  --color-soon-text: #8f5300;
  --color-soon-wash: #fcf1df;

  /* Translucent helpers */
  --color-ink-25: rgb(22 22 26 / 0.25);
  --color-on-dark-muted: rgb(255 255 255 / 0.7);
  --color-on-dark-line: rgb(255 255 255 / 0.1);
  --color-on-dark-ring: rgb(255 255 255 / 0.25);

  /* Shape */
  --radius-card: 20px;
  --radius-control: 12px;
  --radius-pill: 9999px;

  /* Elevation */
  --shadow-card: 0 1px 2px rgb(22 22 26 / 0.04);
  --shadow-lift: 0 6px 20px -8px rgb(22 22 26 / 0.18);
  --ring-line: 0 0 0 1px var(--color-line);
  --elevation-card: var(--ring-line), var(--shadow-card);

  /* Spacing (4px base) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --space-32: 128px;

  /* Layout */
  --container-content: 70rem; /* 1120px — portal content width */
  --container-wide: 85rem;    /* 1360px — marketing sections */
  --gutter: clamp(16px, 4vw, 40px);
  --touch-min: 44px;

  /* Motion */
  --ease-out-soft: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 150ms;
  --duration-rise: 320ms;
  --duration-arc: 900ms;
  --stagger: 50ms;
}
/* Minimal reset + portal base rules. Imported once by BaseLayout. */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%;
}
body {
  min-height: 100dvh;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.5;
}
img, picture, video, canvas, svg { display: block; max-width: 100%; }
img, video { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
h1, h2, h3, h4 { letter-spacing: var(--tracking-heading); line-height: 1.15; text-wrap: balance; }
p { text-wrap: pretty; }
:focus-visible { outline: 2px solid var(--color-coral-strong); outline-offset: 2px; }
::selection { background: var(--color-coral-wash); color: var(--color-ink); }

.eyebrow {
  font-size: var(--text-xs);
  line-height: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--color-muted);
}
.tabular { font-variant-numeric: tabular-nums; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: var(--space-4); top: -100px; z-index: 1000;
  padding: var(--space-3) var(--space-4);
  background: var(--color-ink); color: #fff;
  border-radius: var(--radius-control); font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: var(--space-4); }

@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;
  }
}