/* Self-hosted Recursive variable font */

:root {
    --font-primary: "Recursive", system-ui, sans-serif;
    /* --font-secondary: "Recursive", system-ui, sans-serif; */
    --font-secondary: 'Open Sans', 'Arial', sans-serif; 

    --recursive-weight: 400;  /* wght: 300–1000 */
    --recursive-slant: 0;     /* slnt: 0 to -15 (use negative values) */
    --recursive-casl: 0;      /* CASL: 0–1 */
    --recursive-crsv: 0;      /* CRSV: 0–1 */
    --recursive-mono: 0;      /* MONO: 0–1 */

    /* Guidance:
    --font-heading → used for h1, h2, h3… (usually bolder, bigger)
    --font-body    → paragraphs, long-form content
    --font-ui      → menus, buttons, labels
    --font-caption → small labels, hints, tooltips
    --font-code    → monospace for code/technical text
    */

    /* font-ui */
    --font-ui-family: "Recursive", system-ui, sans-serif;
    --font-ui-variation: "wght" 400,
                                "slnt" 0,
                                "CASL" 0,
                                "CRSV" 0,
                                "MONO" 0; 

    /* font-heading */
    --font-heading-family: "Recursive", system-ui, sans-serif;
    --font-heading-variation: "wght" 512,
                              "slnt" 0,
                              "CASL" 0.72,
                              "CRSV" 0,
                              "MONO" 0; 

    /* font-body */
    --font-body-family: "Recursive", system-ui, sans-serif;
    --font-body-variation:  "wght" 352,
                            "slnt" 0,
                            "CASL" 0.32,
                            "CRSV" 0,
                            "MONO" 0.4; 

    /* Bold variant for body text (used for strong/b in markdown) */
    --font-body-variation-bold:  "wght" 700,
                                 "slnt" 0,
                                 "CASL" 0.32,
                                 "CRSV" 0,
                                 "MONO" 0.4;

    /* font-caption */
    --font-caption-family: "Recursive", system-ui, sans-serif;
    --font-caption-variation: "wght" 300,
                              "slnt" 0,
                              "CASL" 0,
                              "CRSV" 0,
                              "MONO" 0; 

    /* font-code */
    --font-code-family: "Recursive", system-ui, sans-serif;
    --font-code-variation: "wght" 400,
                           "slnt" 0,
                           "CASL" 0.32,
                           "CRSV" 0,
                           "MONO" 1;
}

@font-face {
  font-family: "Recursive";
  src: url("/assets/fonts/Recursive-VF.woff2") format("woff2");
  font-weight: 300 1000; /* variable axis range */
  font-style: normal;
  font-display: swap;
}

/* Oblique range for slant axis */
@font-face {
  font-family: "Recursive";
  src: url("/assets/fonts/Recursive-VF.woff2") format("woff2");
  font-weight: 300 1000;
  font-style: oblique -15deg 0deg;
  font-display: swap;
}

/* Apply Recursive axes using your variables (fallbacks provided)*/
.basic-div {
  font-variation-settings: var(
    --font-primary-variation,
    "wght" var(--recursive-weight, 400),
    "slnt" var(--recursive-slant, 0),
    "CASL" var(--recursive-casl, 0),
    "CRSV" var(--recursive-crsv, 0),
    "MONO" var(--recursive-mono, 0)
  );
  font-variation-settings: var(--font-ui-variation, inherit);
}