/* GENERATED from design/tokens.json by tools/build-tokens.php - do not edit. */
:root {
  /* Colour - each token carries a role; see design/tokens.json */
  --grina-color-leaf: #8CC63F;
  --grina-color-grove: #517929;
  --grina-color-pine: #1F3A33;
  --grina-color-teal: #1F6B78;
  --grina-color-clay: #A55B32;
  --grina-color-sage-3: #CFDDC0;
  --grina-color-sage-2: #E3EBD8;
  --grina-color-sage-1: #F0F3E8;
  --grina-color-paper: #FBFCF8;
  --grina-color-white: #FFFFFF;
  --grina-color-ink-on-leaf: #14301A;
  --grina-color-body: #44513F;
  --grina-color-quiet: #687167;
  --grina-color-numeral: #858E7C;
  --grina-color-hairline: #E3E9DC;
  --grina-color-on-dark: #EAF1E5;
  --grina-color-on-dark-quiet: #A8C9B2;

  /* Type - five steps, no more */
  --grina-size-display: 52px;
  --grina-weight-display: 800;
  --grina-leading-display: 1.0;
  --grina-tracking-display: -0.045em;
  --grina-size-naslov: 34px;
  --grina-weight-naslov: 700;
  --grina-leading-naslov: 1.1;
  --grina-tracking-naslov: -0.035em;
  --grina-size-sekcija: 23px;
  --grina-weight-sekcija: 700;
  --grina-leading-sekcija: 1.2;
  --grina-tracking-sekcija: -0.025em;
  --grina-size-telo: 14.5px;
  --grina-weight-telo: 400;
  --grina-leading-telo: 1.65;
  --grina-tracking-telo: 0;
  --grina-size-mono: 11px;
  --grina-weight-mono: 500;
  --grina-leading-mono: 1.4;
  --grina-tracking-mono: 0.08em;

  /* Radius - tri jezika, ne vise */
  --grina-radius-action: 999px;
  --grina-radius-card: 16px;
  --grina-radius-field: 10px;

  /* Spacing */
  --grina-space-3xs: 4px;
  --grina-space-2xs: 8px;
  --grina-space-xs: 12px;
  --grina-space-sm: 16px;
  --grina-space-md: 24px;
  --grina-space-lg: 32px;
  --grina-space-xl: 44px;
  --grina-space-2xl: 56px;
  --grina-space-3xl: 80px;

  /* Depth - two levels only */
  --grina-border-calm: 1px solid var(--grina-color-hairline);
  --grina-lift-hover: -3px;
  --grina-duration: 400ms;

  /* Layout */
  --grina-content-width: 1240px;
  --grina-gutter: 28px;
}

@media (max-width: 1023px) {
  :root {
    --grina-size-display: 44px;
    --grina-size-naslov: 30px;
    --grina-size-sekcija: 21px;
    --grina-size-telo: 14.5px;
    --grina-size-mono: 11px;
  }
}

@media (max-width: 559px) {
  :root {
    --grina-size-display: 34px;
    --grina-size-naslov: 26px;
    --grina-size-sekcija: 19px;
    --grina-size-telo: 15px;
    --grina-size-mono: 11px;
    --grina-gutter: 16px;
  }
}