/*
 * VerverFlow design tokens: the single source for colour, type, space and shape.
 * Documents, previews and the site load this file; nothing restates a value.
 * Why each value is what it is: brand/README.md.
 */

/* Selawik 1.01 (Microsoft, OFL with Reserved Font Name Selawik, so the files stay as Microsoft ships them): the
   open twin of Segoe UI, the letter of the quote and invoices of March 2026 that Dani called the calmest (30-10).
   Two weights; its figures are tabular by default */
@font-face {
  font-family: "Selawik";
  src: url("fonts/Selawik-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Selawik";
  src: url("fonts/Selawik-Semibold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  /* The ribbon: the two ends of the mark's gradient, as logo/mark.svg draws them (test_drift holds them equal).
     Colour belongs to the sender, never to the content (Dani, 30-10): the mark, and on a document the line over
     the lockup, the ribbon unrolled; nothing else on a page carries a hue */
  --ribbon-start: #4dc4ec;
  --ribbon-end: #7743e4;
  --ribbon: linear-gradient(90deg, var(--ribbon-start), var(--ribbon-end));

  /* Ink and stone: the deepest blue from the middle of the ribbon, so text and mark are one family and the page
     reads as navy, the colour of trust, without reading as colour; never beige */
  --ink: #11162c;         /* text, actions, the amount due; the one dark surface. 17.9:1 on sheet */
  --graphite: #383d4f;    /* long secondary text, 10.8:1 */
  --stone: #5c6172;       /* labels and captions, 6.2:1: AA at any size */
  --line-strong: #868a99; /* input borders, 3.4:1 on sheet, 3.3:1 on paper (WCAG 1.4.11); never text */
  --line: #e2e4eb;        /* hairlines: tables, dividers */
  --surface: #f4f4f5;     /* a tinted block on a screen; paper carries none */
  --paper: #fafaf9;       /* a page on a screen */
  --sheet: #ffffff;       /* a document; a tinted page would print as a film of ink */
  --ink-muted: #a5a9b8;   /* secondary text on ink, 7.6:1; never on light */

  /* Semantic: only as a dot beside its word, never colour alone */
  --success: #1e7a4c;
  --warning: #9a5b06;
  --danger: #b42318;

  /* Roles: components use these, not the values above */
  --surface-page: var(--paper);
  --surface-sheet: var(--sheet);
  --surface-muted: var(--surface);
  --surface-night: var(--ink);
  --text-primary: var(--ink);
  --text-body-secondary: var(--graphite);
  --text-secondary: var(--stone);
  --text-inverse: var(--sheet);
  --text-on-night: var(--ink-muted);
  --border-subtle: var(--line);
  --border-input: var(--line-strong);
  --border-strong: var(--ink);
  --action: var(--ink);
  --action-hover: var(--graphite);
  --focus-ring: 0 0 0 2px var(--sheet), 0 0 0 4px var(--ink);

  /* Type: one family. Selawik, a humanist sans: open, soft letters whose strokes run like the ribbon, warm and
     calm (Dani chose it over Schibsted Grotesk, 30-10). Its figures are tabular, so every amount aligns, and
     its 0 is narrower than its O and its 1 carries a flag, so an IBAN needs no monospace */
  --font-sans: "Selawik", "Segoe UI", ui-sans-serif, system-ui, sans-serif;
  --font-display: var(--font-sans);
  --numeric: tabular-nums;

  /* Type scale, ratio 1.25 on a 16px base */
  --text-xs: 0.75rem;   /* 12 */
  --text-sm: 0.875rem;  /* 14 */
  --text-base: 1rem;    /* 16 */
  --text-lg: 1.25rem;   /* 20 */
  --text-xl: 1.5625rem; /* 25 */
  --text-2xl: 1.953rem; /* 31 */
  --text-3xl: 2.441rem; /* 39 */
  --text-4xl: 3.052rem; /* 49 */

  /* Display, screens only: the same ratio continued; a document never goes past 4xl */
  --text-5xl: 3.815rem; /* 61 */
  --text-6xl: 4.768rem; /* 76 */

  /* Two weights, the two Selawik is drawn in: hierarchy from size and weight, never from colour */
  --weight-regular: 400;
  --weight-semibold: 600;

  --leading-tight: 1.1;
  --leading-snug: 1.3;
  --leading-body: 1.5;
  --tracking-display: -0.03em; /* 4xl and up */
  --tracking-tight: -0.015em;  /* headings below that */
  --tracking-label: 0.06em;    /* uppercase labels */

  /* Space: a 4px base; generous, because less on a page reads as more certain */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem; /* screens only: between chapters */

  /* Shape: square, so the one curved thing, the ribbon of the mark, stands out. No shadows: structure
     comes from hairlines */
  --radius: 2px; /* controls only; blocks are square */
  --rule: 1px;
  --tap-min: 2.75rem; /* the smallest thing a finger taps, 44px; grown around the text, never moving it */

  /* Motion: the work lands, nothing else moves. Only transform and opacity, only without reduced motion */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 400ms;
  --stagger: 70ms;

  --content-max: 72rem;
  --measure: 68ch;

  /* Documents (A4, printed and PDF): points, not rem. The form of March 2026 (Dani, 30-10: calm, minimal, lots
     of air), one skeleton for the quote, the invoice, the credit note and the legal pages: one narrow column of
     about 70 characters with wide margins; running text a hair above the form's size, on a wide leading; section
     heads a plain line in weight, on a quote the first of them the problem's claim; a key figure the thing to
     see on its page; the name in the lockup the largest text on the sheet */
  --doc-margin: 26mm 36mm 24mm;
  --doc-prose: 10pt;
  --leading-prose: 1.6;
  --doc-text-sm: 8pt;    /* labels, captions, the legal pages */
  --doc-text-md: 10.5pt; /* a run-in heading, a tile, the total of a price list */
  --doc-text-lg: 12pt;   /* the subject under the document type */
  --doc-heading: 14pt;
  --doc-figure: 20pt;
  --doc-title: 20pt;     /* the name in the lockup */
  --doc-hero: 18pt;      /* the figure of a proof */
}