/* =============================================================================
   ReLeaf: design tokens
   -----------------------------------------------------------------------------
   One file every stylesheet reads from. nav.css and team.css still carry their
   own copies of the palette under their own prefixes (--nv-*, and the bare
   names in team.css) because they were written to be droppable into any page on
   their own; the values here are the same values. Change a colour here and
   there, or nowhere else.

   TYPE. The team page was drawn in Inter and the homepage brief argues against
   Inter, so the family sits behind two variables. Swapping the site over is an
   edit to --font-display and --font-body and nothing else. Whatever you choose
   must be self-hosted: the iGEM wiki blocks fonts served from another host, and
   a full 繁體中文 face is 10 to 20 MB unsubset.
   ========================================================================== */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  /* woff2 first: subset to Latin, Greek, punctuation, arrows and maths, both
     axes and the features the pages ask for (tnum, frac, ss01, cv11 and the
     defaults), 132 KB against the full file's 854 KB. Cut again on 11 Oct by
     build/subset-font.py, which reads every character the repository sets:
     Cyrillic, Greek Extended and the private-use glyphs went, and nothing
     the wiki draws did. Re-run it after writing in a new language. The .ttf
     is the whole font, kept as the fallback for browsers without woff2. */
  src: url("../fonts/inter-variable.woff2") format("woff2"),
       url("../fonts/inter-variable.ttf") format("truetype");
}

:root {
  /* ---- neutrals ---- */
  --white:    #ffffff;
  --gray-50:  #fafafa;
  --gray-100: #f5f5f5;
  --gray-200: #e5e5e5;
  --gray-300: #d4d4d4;
  --gray-400: #a3a3a3;
  --gray-500: #6b6b6b;   /* was #737373 (4.3-4.45:1 on the tinted panels); 4.8:1 on --gray-100 and --amber-100, 5.0:1 on --leaf-50, 5.3:1 on white */
  /* the grey for small label text. It was #6e6e6e (5.1:1) until --gray-500 was
     darkened past it; one grey now serves both. --gray-400 is 2.5:1: rules and
     strokes only, never words. */
  --gray-450: var(--gray-500);
  --gray-600: #525252;
  --gray-700: #404040;
  --black:    #171717;

  /* ---- ReLeaf accents, pulled from the team hoodie ---- */
  --leaf-900: #14402b;
  --leaf-700: #23684a;
  --leaf-500: #4f9c6f;
  --leaf-200: #cfe4d8;
  --leaf-100: #e3f0e8;
  --leaf-50:  #f4f9f6;

  /* ---- signal colours, used only by callouts and status chips ---- */
  --amber-700: #92610c;
  --amber-100: #fdf3dc;
  --rust-700:  #9a3d22;
  --rust-100:  #fbeae4;
  --slate-700: #3f5468;
  --slate-100: #e8eef4;

  /* ---- type ---- */
  --font-display: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                  "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                  "Helvetica Neue", Arial, sans-serif;
  --font-mono:    ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  --text-h1:   clamp(2.125rem, 1.2rem + 2.8vw, 3.5rem);
  --text-h2:   clamp(1.5rem, 1.15rem + 1.05vw, 2rem);
  --text-h3:   clamp(1.15rem, 1.02rem + .4vw, 1.375rem);
  --text-lede: clamp(1.0625rem, .95rem + .45vw, 1.3125rem);
  --text-base: 1.0625rem;
  --text-sm:   .9375rem;
  --text-xs:   .8125rem;

  /* ---- space ---- */
  --sp-1:  .25rem;
  --sp-2:  .5rem;
  --sp-3:  .75rem;
  --sp-4:  1rem;
  --sp-5:  1.5rem;
  --sp-6:  2rem;
  --sp-7:  3rem;
  --sp-8:  clamp(3rem, 1.5rem + 5vw, 5.5rem);

  /* ---- frame ---- */
  --nav-h:   68px;            /* matches --nv-h in nav.css */
  --max:     1280px;
  --measure: 68ch;            /* body column: long enough to argue, short enough to read */
  --radius:  .5rem;
  --radius-sm: .3125rem;

  --shadow-sm: 0 1px 2px rgb(0 0 0 / .05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);
}