/* The MatchLens design tokens
   Copy this file into any project that needs the look. It is the only source of truth
   for colour, type and spacing. Change it here first, then copy it out.
   No build step, no preprocessor, no dependency. */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');

:root {

  /* ============ COLOUR ============
     Nine values. If you need a tenth, you probably need a different layout instead. */

  --paper:       #f2f4f5;   /* page background. Cool, like laser paper. Never cream. */
  --card:        #ffffff;   /* anything raised off the page */
  --rule:        #c9d2d6;   /* quiet dividers between rows. 1px. Meant to be seen. */
  --rule-strong: #848e93;   /* the edge of anything you can type in or press, and hover borders.
                               3.04:1 on paper and 3.35:1 on card, which is what WCAG 1.4.11 asks
                               of a control boundary. It was #a9b6bc, which was 1.9:1 and left
                               every input on the tracker with an edge some people cannot see. */

  --ink:         #0f1417;   /* headlines and values */
  --ink-2:       #3c464c;   /* body copy */
  --ink-3:       #667177;   /* labels, captions, and the "not published" state. 4.51:1 on paper
                               and 4.98:1 on card. It was #6e7a80, which measured 4.00:1 on paper,
                               under AA for text this size, and this token carries the difference
                               between "not published" and "not read yet". */

  --stamp:       #23407e;   /* ELIGIBLE, links, focus. Stamp ink blue. */
  --stamp-wash:  #e7ecf4;
  --strike:      #a32a1e;   /* RULED OUT. Rubber-stamp red. */
  --strike-wash: #f6e9e6;

  /* There is deliberately no green. "Eligible" only means a program has published
     nothing that excludes you. Green would overstate it. */

  /* ============ TYPE ============
     One family. Plus Jakarta Sans. Nothing else, ever. */

  --font: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --t-display-xl: 700 3.5rem/1.04 var(--font);    /* 56px. One per page. */
  --t-display-l:  700 2.5rem/1.08 var(--font);    /* 40px. Section openers. */
  --t-h2:         600 1.875rem/1.15 var(--font);  /* 30px */
  --t-h3:         600 1.3125rem/1.25 var(--font); /* 21px */
  --t-body-l:     400 1.1875rem/1.6 var(--font);  /* 19px. Ledes. */
  --t-body:       400 1.0625rem/1.6 var(--font);  /* 17px. Default. */
  --t-data:       500 1rem/1.4 var(--font);       /* 16px. Table cells, field values. */
  --t-label:      600 0.78125rem/1.2 var(--font); /* 12.5px uppercase, +0.09em */
  --t-source:     500 0.8125rem/1.4 var(--font);  /* 13px. Dates and source URLs. */

  --tracking-tight:  -0.02em;
  --tracking-label:   0.09em;

  /* ============ SPACE ============ 4px base */

  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 44px; --s8: 72px;

  --max: 1140px;
  --gutter: 28px;

  /* ============ GEOMETRY ============ */

  --radius: 0;        /* forms do not have rounded corners */
  --radius-button: 2px;
  --clip: 14px;       /* the clipped top-right corner on an attestation block */

  /* ============ MOTION ============
     Two transitions in the entire product. Both are listed here so a third
     has to be added on purpose. */

  --strike-draw: 180ms cubic-bezier(0.2, 0, 0.2, 1);   /* the strike line drawing across */
  --settle:      240ms cubic-bezier(0.2, 0, 0.2, 1);   /* hero fields settling on load */
}

/* Dark mode is for the app only, because people build program lists at night.
   The marketing page stays light. Same roles, swapped values. */
:root[data-theme="dark"] {
  --paper:       #0f1417;
  --card:        #161d21;
  --rule:        #2a343a;
  --rule-strong: #5e696f;   /* 3.28:1 on paper, 3.02:1 on card. Was #3d4a51 at 1.86:1. */

  --ink:         #e9edef;
  --ink-2:       #b3bdc2;
  --ink-3:       #859399;

  --stamp:       #8ba6dd;
  --stamp-wash:  #1a2438;
  --strike:      #e2988b;
  --strike-wash: #2c1d1a;
}

/* ============ THE THREE THINGS EVERY SURFACE NEEDS ============ */

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: var(--t-body);
  font-feature-settings: "tnum" 1;   /* numbers align in columns, everywhere */
}

:where(a) { color: var(--stamp); }

/* One focus style for the whole product. Visible, never removed. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--stamp);
  outline-offset: 1px;
}

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