/* tyny.ai brand: fonts, colours and base type for the website.
   Fonts are self-hosted (no requests to Google). Paths are relative to this file,
   so keep the web/ and fonts/ folders side by side, or update the url()s. */

@font-face {
  font-family: "Urbanist";
  src: url("../fonts/urbanist/urbanist-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("../fonts/source-serif-4/source-serif-4-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/jetbrains-mono/jetbrains-mono-latin.woff2") format("woff2");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Colours */
  --tyny-navy:  #212745;  /* icon tile, wordmark, headings, dark backgrounds */
  --tyny-mint:  #5DCEAF;  /* the dots and accent lines only, never text on white */
  --tyny-sky:   #B4DCFA;  /* tagline on navy, highlights, small panels */
  --tyny-slate: #4A5170;  /* secondary text, tagline on white */
  --tyny-white: #FFFFFF;

  /* Fonts */
  --tyny-font-heading: "Urbanist", "Century Gothic", Arial, sans-serif;
  --tyny-font-body: "Source Serif 4", Georgia, serif;
  --tyny-font-mono: "JetBrains Mono", Consolas, monospace;
}

body {
  font-family: var(--tyny-font-body);
  font-size: 1.125rem;   /* 18px */
  line-height: 1.6;
  color: var(--tyny-navy);
  background: var(--tyny-white);
}

h1, h2, h3, h4, h5, h6,
nav, button, .tyny-heading {
  font-family: var(--tyny-font-heading);
  line-height: 1.15;
  letter-spacing: -0.01em;
}
h1, h2 { font-weight: 700; }
h3, h4, h5, h6, nav, button { font-weight: 600; }

code, pre, kbd, samp {
  font-family: var(--tyny-font-mono);
  font-size: 0.9em;
}

/* Light text on navy looks heavier than dark text on white (an optical effect).
   For large headings on navy, step the weight down slightly to match. */
.tyny-on-navy {
  background: var(--tyny-navy);
  color: var(--tyny-white);
}
.tyny-on-navy h1, .tyny-on-navy h2 { font-weight: 670; }
.tyny-on-navy h3, .tyny-on-navy h4 { font-weight: 570; }