/* =============================================================================
   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;
  src: 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: #737373;
  --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);
}