/**
 * Atomic typography tokens.
 */

/* Font families: identity values only; usage tokens provide fallback stacks. */

@property --marsal-fontFamily-ibmPlexSerif {
  syntax: "<string>";
  inherits: true;
  initial-value: "ibm-plex-serif";
}

@property --marsal-fontFamily-ibmPlexSans {
  syntax: "<string>";
  inherits: true;
  initial-value: "ibm-plex-sans";
}

@property --marsal-fontFamily-ramaGothic {
  syntax: "<string>";
  inherits: true;
  initial-value: "rama-gothic-e";
}

@property --marsal-fontFamily-avenirMedium {
  syntax: "<string>";
  inherits: true;
  initial-value: "Avenir-Medium";
}

@property --marsal-fontFamily-avenirBlack {
  syntax: "<string>";
  inherits: true;
  initial-value: "Avenir-Black";
}

@property --marsal-fontFamily-avenirLight {
  syntax: "<string>";
  inherits: true;
  initial-value: "Avenir-Light";
}

@property --marsal-fontFamily-avenirBook {
  syntax: "<string>";
  inherits: true;
  initial-value: "Avenir-Book";
}

@property --marsal-fontFamily-avenirHeavy {
  syntax: "<string>";
  inherits: true;
  initial-value: "Avenir-Heavy";
}

@property --marsal-fontFamily-helveticaNeueMedium {
  syntax: "<string>";
  inherits: true;
  initial-value: "HelveticaNeueMedium";
}

@property --marsal-fontFamily-openSansLight {
  syntax: "<string>";
  inherits: true;
  initial-value: "Open Sans Light";
}

@property --marsal-fontFamily-openSansBold {
  syntax: "<string>";
  inherits: true;
  initial-value: "Open Sans Bold";
}

@property --marsal-fontFamily-openSansSemiBold {
  syntax: "<string>";
  inherits: true;
  initial-value: "Open Sans SemiBold";
}

@property --marsal-fontFamily-openSansItalic {
  syntax: "<string>";
  inherits: true;
  initial-value: "Open Sans Italic";
}

@property --marsal-fontFamily-openSansRegular {
  syntax: "<string>";
  inherits: true;
  initial-value: "Open Sans Regular";
}

@property --marsal-fontFamily-fontAwesome5Pro {
  syntax: "<string>";
  inherits: true;
  initial-value: "Fontawesome 5 pro";
}

@property --marsal-fontFamily-fontAwesome5ProLight {
  syntax: "<string>";
  inherits: true;
  initial-value: "Fontawesome 5 pro Light";
}

@property --marsal-fontFamily-fontAwesome5ProBrand {
  syntax: "<string>";
  inherits: true;
  initial-value: "Fontawesome 5 pro Brand";
}

@property --marsal-fontFamily-fontAwesome5Free {
  syntax: "<string>";
  inherits: true;
  initial-value: "Font Awesome 5 Free";
}

@property --marsal-fontFamily-fontAwesome5Brands {
  syntax: "<string>";
  inherits: true;
  initial-value: "Font Awesome 5 Brands";
}

@property --marsal-fontFamily-fontAwesome6Free {
  syntax: "<string>";
  inherits: true;
  initial-value: "Font Awesome 6 Free";
}

@property --marsal-fontFamily-fontAwesome6Brands {
  syntax: "<string>";
  inherits: true;
  initial-value: "Font Awesome 6 Brands";
}

/*
 * Fluid font sizes generated via Utopia Project:
 * https://utopia.fyi/type/calculator?c=340,16,1.2,1500,18,1.25,7,3,340-400-500-600-700-800-900-1000-1100-1200-1300-1395-1500-1600&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12
 *
 * --marsal-fontSize-0 is 16px at a 340px viewport and 18px at 1500px; each
 * step is 1.2 times the one below at 340px and 1.25 times at 1500px.
 */

@property --marsal-fontSize--3 {
  syntax: "<length-percentage>";
  inherits: true;
  initial-value: 9.216px;
}

@property --marsal-fontSize--2 {
  syntax: "<length-percentage>";
  inherits: true;
  initial-value: 11.1104px;
}

@property --marsal-fontSize--1 {
  syntax: "<length-percentage>";
  inherits: true;
  initial-value: 13.3328px;
}

@property --marsal-fontSize-0 {
  syntax: "<length-percentage>";
  inherits: true;
  initial-value: 16px;
}

@property --marsal-fontSize-1 {
  syntax: "<length-percentage>";
  inherits: true;
  initial-value: 19.2px;
}

@property --marsal-fontSize-2 {
  syntax: "<length-percentage>";
  inherits: true;
  initial-value: 23.04px;
}

@property --marsal-fontSize-3 {
  syntax: "<length-percentage>";
  inherits: true;
  initial-value: 27.648px;
}

@property --marsal-fontSize-4 {
  syntax: "<length-percentage>";
  inherits: true;
  initial-value: 33.1776px;
}

@property --marsal-fontSize-5 {
  syntax: "<length-percentage>";
  inherits: true;
  initial-value: 39.8128px;
}

@property --marsal-fontSize-6 {
  syntax: "<length-percentage>";
  inherits: true;
  initial-value: 47.776px;
}

@property --marsal-fontSize-7 {
  syntax: "<length-percentage>";
  inherits: true;
  initial-value: 57.3312px;
}

/* Font weights. */

@property --marsal-fontWeight-thin {
  syntax: "<integer>";
  inherits: true;
  initial-value: 100;
}

@property --marsal-fontWeight-extraLight {
  syntax: "<integer>";
  inherits: true;
  initial-value: 200;
}

@property --marsal-fontWeight-light {
  syntax: "<integer>";
  inherits: true;
  initial-value: 300;
}

@property --marsal-fontWeight-regular {
  syntax: "<integer>";
  inherits: true;
  initial-value: 400;
}

@property --marsal-fontWeight-medium {
  syntax: "<integer>";
  inherits: true;
  initial-value: 500;
}

@property --marsal-fontWeight-semiBold {
  syntax: "<integer>";
  inherits: true;
  initial-value: 600;
}

@property --marsal-fontWeight-bold {
  syntax: "<integer>";
  inherits: true;
  initial-value: 700;
}

@property --marsal-fontWeight-extraBold {
  syntax: "<integer>";
  inherits: true;
  initial-value: 800;
}

@property --marsal-fontWeight-black {
  syntax: "<integer>";
  inherits: true;
  initial-value: 900;
}

/* Line heights, from veryShort to veryTall. */

@property --marsal-lineHeight-veryShort {
  syntax: "<number>";
  inherits: true;
  initial-value: 1;
}

@property --marsal-lineHeight-short {
  syntax: "<number>";
  inherits: true;
  initial-value: 1.25;
}

@property --marsal-lineHeight-standard {
  syntax: "<number>";
  inherits: true;
  initial-value: 1.5;
}

@property --marsal-lineHeight-tall {
  syntax: "<number>";
  inherits: true;
  initial-value: 1.75;
}

@property --marsal-lineHeight-veryTall {
  syntax: "<number>";
  inherits: true;
  initial-value: 2;
}

/* Unitless ratios are converted to em lengths by usage tokens. */

@property --marsal-letterSpacingRatio-veryTight {
  syntax: "<number>";
  inherits: true;
  initial-value: -0.04;
}

@property --marsal-letterSpacingRatio-tight {
  syntax: "<number>";
  inherits: true;
  initial-value: -0.02;
}

@property --marsal-letterSpacingRatio-standard {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

@property --marsal-letterSpacingRatio-loose {
  syntax: "<number>";
  inherits: true;
  initial-value: 0.03;
}

@property --marsal-letterSpacingRatio-veryLoose {
  syntax: "<number>";
  inherits: true;
  initial-value: 0.0625;
}

:root {
  /* Font families. */
  --marsal-fontFamily-ibmPlexSerif: "ibm-plex-serif";
  --marsal-fontFamily-ibmPlexSans: "ibm-plex-sans";
  --marsal-fontFamily-ramaGothic: "rama-gothic-e";
  --marsal-fontFamily-avenirMedium: "Avenir-Medium";
  --marsal-fontFamily-avenirBlack: "Avenir-Black";
  --marsal-fontFamily-avenirLight: "Avenir-Light";
  --marsal-fontFamily-avenirBook: "Avenir-Book";
  --marsal-fontFamily-avenirHeavy: "Avenir-Heavy";
  --marsal-fontFamily-helveticaNeueMedium: "HelveticaNeueMedium";
  --marsal-fontFamily-openSansLight: "Open Sans Light";
  --marsal-fontFamily-openSansBold: "Open Sans Bold";
  --marsal-fontFamily-openSansSemiBold: "Open Sans SemiBold";
  --marsal-fontFamily-openSansItalic: "Open Sans Italic";
  --marsal-fontFamily-openSansRegular: "Open Sans Regular";
  --marsal-fontFamily-fontAwesome5Pro: "Fontawesome 5 pro";
  --marsal-fontFamily-fontAwesome5ProLight: "Fontawesome 5 pro Light";
  --marsal-fontFamily-fontAwesome5ProBrand: "Fontawesome 5 pro Brand";
  --marsal-fontFamily-fontAwesome5Free: "Font Awesome 5 Free";
  --marsal-fontFamily-fontAwesome5Brands: "Font Awesome 5 Brands";
  --marsal-fontFamily-fontAwesome6Free: "Font Awesome 6 Free";
  --marsal-fontFamily-fontAwesome6Brands: "Font Awesome 6 Brands";

  /* Font sizes. */
  --marsal-fontSize--3: clamp(0.576rem, 0.5795rem + -0.0037vw, 0.5787rem);
  --marsal-fontSize--2: clamp(0.6944rem, 0.687rem + 0.0352vw, 0.72rem);
  --marsal-fontSize--1: clamp(0.8333rem, 0.8138rem + 0.092vw, 0.9rem);
  --marsal-fontSize-0: clamp(1rem, 0.9634rem + 0.1724vw, 1.125rem);
  --marsal-fontSize-1: clamp(1.2rem, 1.1395rem + 0.2845vw, 1.4063rem);
  --marsal-fontSize-2: clamp(1.44rem, 1.3468rem + 0.4384vw, 1.7578rem);
  --marsal-fontSize-3: clamp(1.728rem, 1.5905rem + 0.6473vw, 2.1973rem);
  --marsal-fontSize-4: clamp(2.0736rem, 1.8763rem + 0.9283vw, 2.7466rem);
  --marsal-fontSize-5: clamp(2.4883rem, 2.2114rem + 1.3033vw, 3.4332rem);
  --marsal-fontSize-6: clamp(2.986rem, 2.6033rem + 1.8008vw, 4.2915rem);
  --marsal-fontSize-7: clamp(3.5832rem, 3.0611rem + 2.4569vw, 5.3644rem);

  /* Font weights. */
  --marsal-fontWeight-thin: 100;
  --marsal-fontWeight-extraLight: 200;
  --marsal-fontWeight-light: 300;
  --marsal-fontWeight-regular: 400;
  --marsal-fontWeight-medium: 500;
  --marsal-fontWeight-semiBold: 600;
  --marsal-fontWeight-bold: 700;
  --marsal-fontWeight-extraBold: 800;
  --marsal-fontWeight-black: 900;

  /* Line heights. */
  --marsal-lineHeight-veryShort: 1;
  --marsal-lineHeight-short: 1.25;
  --marsal-lineHeight-standard: 1.5;
  --marsal-lineHeight-tall: 1.75;
  --marsal-lineHeight-veryTall: 2;

  /* Letter-spacing ratios. */
  --marsal-letterSpacingRatio-veryTight: -0.04;
  --marsal-letterSpacingRatio-tight: -0.02;
  --marsal-letterSpacingRatio-standard: 0;
  --marsal-letterSpacingRatio-loose: 0.03;
  --marsal-letterSpacingRatio-veryLoose: 0.0625;
}