/* COPY of doc-vault-web/public/tokens.css - keep the two in step.
 *
 * Duplicated rather than shared because there is no package boundary between
 * these repos and no build step to introduce one. The back office is a
 * doc-vault surface and should not look like a different product, which is
 * exactly the problem this file was written to solve in the first place.
 * Changing a token here without changing it there is the failure mode to
 * watch for.
 */
/* doc-vault design tokens.
 *
 * One scale, shared by the marketing site (index.html), the registration flow
 * and the dashboard. Before this existed the three pages carried three
 * unrelated systems - seventeen distinct font sizes, radii ranging from 2px to
 * 12px, and spacing picked per-rule - so the app looked like a different
 * product from the site that sold it.
 *
 * Two rules for anything added here:
 *   - Type and space come off the scales below. If a value isn't on a scale,
 *     it needs a reason next to it.
 *   - Anything the finger touches is at least --tap tall. That is what the
 *     mobile layout is actually built around.
 */

:root {
  /* ---------- Palette ---------- */
  --ink: #0C1C35;
  --ink-soft: #33475F;
  --slate: #5C6C81;
  --paper: #F5F8FC;
  --paper-2: #EAF0FB;
  --white: #ffffff;

  --blue: #0066F9;
  --blue-deep: #0050C7;
  --blue-tint: #DCE9FE;

  /* Hairlines carry most of this design's structure - there are very few
     shadows - so the two pages must not disagree on them. They used to:
     #D8E2F1 here, #DCE5F0 in the app. */
  --line: #D8E2F1;
  --line-dark: #1E3358;

  --danger: #A3231E;
  --danger-bg: #FDECEC;
  --ok: #157F4B;
  --ok-bg: #E4F5EC;
  --warn-fg: #8A5B00;
  --warn-bg: #FFF6E0;
  --warn-line: #F0D98C;

  /* Aliases kept so the app stylesheet's original names still resolve.
     Same colour, one definition. */
  --navy: var(--ink);
  --bg: var(--paper);
  --bg-2: var(--paper-2);
  --muted: var(--slate);
  --blue-dark: var(--blue-deep);

  /* ---------- Type ---------- */
  --font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-serif: "Newsreader", Georgia, "Times New Roman", serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* A modular scale. The larger steps interpolate with the viewport so type
     grows continuously instead of jumping at one breakpoint - headings used to
     stay at their desktop size until 880px and then snap. Each clamp is
     min → max across roughly 360px → 1120px. */
  --fs-3xs: 0.6875rem;                                     /* 11 - mono eyebrows */
  --fs-2xs: 0.75rem;                                       /* 12 - legal, captions */
  --fs-xs: 0.8125rem;                                      /* 13 */
  --fs-sm: 0.875rem;                                       /* 14 - UI, nav, labels */
  --fs-base: 1rem;                                         /* 16 - body */
  --fs-md: clamp(1rem, 0.955rem + 0.20vw, 1.09375rem);     /* 16 → 17.5 - lede */
  --fs-lg: clamp(1.0625rem, 1.0rem + 0.28vw, 1.1875rem);   /* 17 → 19 */
  --fs-xl: clamp(1.1875rem, 1.06rem + 0.55vw, 1.375rem);   /* 19 → 22 - h3 */
  --fs-2xl: clamp(1.375rem, 1.16rem + 0.94vw, 1.625rem);   /* 22 → 26 */
  --fs-3xl: clamp(1.5rem, 1.15rem + 1.56vw, 2rem);         /* 24 → 32 - h2 */
  --fs-4xl: clamp(1.875rem, 1.13rem + 3.33vw, 2.875rem);   /* 30 → 46 - hero */

  --lh-tight: 1.15;   /* display headings */
  --lh-snug: 1.3;     /* small headings, buttons */
  --lh-normal: 1.55;  /* body copy */

  --tracking-tight: -0.01em;  /* large serif display only */
  --tracking-wide: 0.02em;    /* mono eyebrows */

  /* ---------- Space (4px base) ---------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 28px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-14: 56px;
  --sp-16: 64px;
  --sp-20: 80px;

  /* Fluid rhythm. 84px of section padding is right on a desktop and absurd on
     a phone, where it pushes real content below the fold. */
  --section-y: clamp(3.5rem, 2.1rem + 6vw, 5.25rem);  /* 56 → 84 */
  --gutter: clamp(1.25rem, 0.93rem + 1.4vw, 2rem);    /* 20 → 32 */
  --measure: 1120px;                                  /* content column */

  /* ---------- Shape ---------- */
  /* Deliberately tight. The brand is a document archive - crisp edges, hairline
     rules. The dashboard's old 12px cards read as a different company. */
  --radius-xs: 2px;   /* buttons, inputs, tags */
  --radius-sm: 4px;   /* cards, panels, dialogs */
  --radius-pill: 999px;

  --shadow-sm: 0 3px 14px rgba(12, 28, 53, .06);
  --shadow-lg: 0 18px 50px rgba(12, 28, 53, .22);

  /* ---------- Controls ---------- */
  /* Minimum comfortable touch target. Every interactive element in the header
     and every button on a form meets this; the old nav links were ~35px. */
  --tap: 44px;
  --transition: .15s ease;
}

/* ---------- Base ---------- */

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

html {
  scroll-behavior: smooth;
  /* The sticky header would otherwise cover the top of any section reached by
     an in-page anchor. */
  scroll-padding-top: 88px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-serif);
  font-weight: 500;
  line-height: var(--lh-tight);
  margin: 0;
  color: var(--ink);
  /* Stops long compound German words ("Auftragsbearbeitungsvertrag") from
     overflowing a narrow screen - a real failure mode for this copy. */
  overflow-wrap: break-word;
  /* Evens out the last line instead of leaving one orphaned word. Ignored by
     browsers that don't support it, which just get the default ragged break. */
  text-wrap: balance;
}

p { margin: 0; }
a { color: inherit; }

img, svg, video { max-width: 100%; }

/* Never let a stray wide element create a horizontal scrollbar. This is a
   guard, not the fix - the layouts below are built to fit. */
html, body { overflow-x: clip; }

:where(a, button, input, select, textarea):focus-visible {
  outline: 2px solid var(--blue-deep);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}

[hidden] { display: none !important; }

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