/* Guldino Helps design tokens. Brand green measured from the logo: #193F34. */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url('/assets/fonts/figtree-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url('/assets/fonts/figtree-latin-ext-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --font: 'Figtree', ui-rounded, 'Segoe UI', system-ui, -apple-system, sans-serif;
  --mono: ui-monospace, 'Cascadia Code', 'SF Mono', Consolas, 'Liberation Mono', monospace;

  /* pine: the brand family */
  --pine-950: #0e261e;
  --pine-900: #133128;
  --pine-800: #193f34;
  --pine-700: #235748;
  --pine-600: #2d6f5c;
  --pine-500: #4b917c;
  --pine-300: #a8cdc1;
  --pine-200: #cde3db;
  --pine-100: #e2eee9;
  --pine-50: #f0f6f3;

  /* surfaces: ground is a faint green-grey, never cream */
  --ground: #f3f6f4;
  --surface: #ffffff;
  --rail: #e9efec;
  --line: #d5dfda;
  --line-strong: #b4c5be;

  /* text, all pine-tinted */
  --ink: #12261f;
  --ink-2: #3b5148;
  --ink-3: #566b62;
  --on-pine: #f4faf7;

  /* the one decorative accent: gold, from the name Gulden. Used for bookmarks and the review flag. */
  --gold-500: #c99a2e;
  --gold-700: #7a5906;
  --gold-100: #fbf0d3;

  /* state colours: always paired with a word and an icon */
  --ok-ink: #14633f;
  --ok-bg: #dff2e7;
  --ok-line: #9fd2b4;
  --warn-ink: #7a4d00;
  --warn-bg: #ffefc6;
  --warn-line: #e6c36a;
  --danger-ink: #962029;
  --danger-bg: #fce5e5;
  --danger-line: #eba8ab;
  --info-ink: #1d5878;
  --info-bg: #e0eff7;
  --info-line: #a9cce0;

  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 22px;

  --sh-1: 0 1px 2px rgb(18 38 31 / 0.07), 0 0 0 1px rgb(18 38 31 / 0.02);
  --sh-2: 0 8px 22px -6px rgb(18 38 31 / 0.16), 0 2px 6px rgb(18 38 31 / 0.06);
  --sh-3: 0 22px 54px -14px rgb(18 38 31 / 0.3), 0 4px 12px rgb(18 38 31 / 0.08);

  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4.5rem;

  --t-xs: 0.75rem;
  --t-sm: 0.8125rem;
  --t-base: 0.9375rem;
  --t-md: 1.0625rem;
  --t-lg: 1.25rem;
  --t-xl: 1.5rem;
  --t-2xl: 2rem;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --topbar-h: 3.5rem;
}