{{- $base := (index . "Base") | default 1 -}}
{{- $unit := (index . "Unit") | default "rem" -}}
{{- $factor := (index . "Factor") | default 1.200 -}}
{{- $scale := partial "base/_size_scale.html" . }}





/********
 # FONTS
 ********/

@font-face{
  font-family: source-code-pro;
  font-weight: 200 900;
  font-style: normal;
  font-stretch: normal;
  src: url({{ (resources.Get "fonts/sourceCodePro-variable.woff2").Permalink }});
}

@font-face{
  font-family: source-code-pro;
  font-weight: 200 900;
  font-style: italic;
  font-stretch: normal;
  src: url({{ (resources.Get "fonts/sourceCodePro-italic-variable.woff2").Permalink }});
}

:root {
  --font-family-sans: system-ui, Arial, sans-serif;
  --font-family-serif: Georgia, serif;
  --font-family-monospace: source-code-pro, monospace;

  --font-family-body: var(--font-family-sans);
  --font-family-heading: var(--font-family-monospace);

  --text-base: {{ $base }}{{ $unit }};
  {{ range $scale -}}
    --text-{{ .Name }}: calc(var(--text-base) * pow({{ $factor }}, {{ .Value }}));
  {{- end }}
}


/* Font size utility classes */
{{ range $scale }}
.text--{{ .Name }} { font-size: var(--text-{{ .Name }}); }
{{- end }}
.text--mono { font-family: var(--font-family-monospace); }
.text--serif { font-family: var(--font-family-serif); }
.text--sans { font-family: var(--font-family-sans); }


html {
  font-family: var(--font-family-body);
  font-size: 100%;
  line-height: 1.45;
}

body {
  font-size: clamp(100%, 3vw, 130%);
}


/***********
 ## HEADINGS
 ***********/

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family-heading);
}

h1 {
  font-size: var(--text-xxl);
}

h2 {
  font-size: var(--text-xl);
}

h3 {
  font-size: var(--text-l);
}

h4 {
  font-size: var(--text-m);
}

p {
  letter-spacing: 0.01em;
}

sup {
  font-size: var(--text-xs);
  line-height: 1;
  vertical-align: text-top;
}

.title {
  font-size: var(--text-xxl);
}

.subtitle {
  font-weight: lighter;
  font-family: var(--font-family-serif);
}

small,
.text--small
{
  color: var(--text-color-secondary);
  font-weight: normal;
  font-size: var(--text-s);
  letter-spacing: 0.01em;
}