/* ---------------------------------------------------------------------------
 *  Odin Intelligence — type
 * ---------------------------------------------------------------------------
 *  Three faces, twelve sizes, four weights, two semantic layers.
 *
 *  Sentient is served by Fontshare, Nunito and JetBrains Mono by Google Fonts.
 *  Self-host for production; the imports below are for prototyping.
 *
 *    @import url('https://api.fontshare.com/v2/css?f[]=sentient@400,401,500&display=swap');
 *    @import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,400;0,500;0,600;0,700;1,400&family=JetBrains+Mono:wght@400;500&display=swap');
 *
 *  Sizes are authored in rem so they follow the user's browser setting. Every
 *  size-and-weight pairing that exists has a name; the ones that do not exist
 *  cannot be reached.
 * --------------------------------------------------------------------------- */

:root {
  --font-serif: 'Sentient', ui-serif, Georgia, serif;
  --font-sans: 'Nunito', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;


  /* Primitive scale. Leading falls as size rises; tracking goes the other way. */
  --size-2xs: 0.6875rem;   /* 11px */
  --size-xs: 0.75rem;   /* 12px */
  --size-sm: 0.8125rem;   /* 13px */
  --size-md: 0.875rem;   /* 14px */
  --size-lg: 1.0rem;   /* 16px */
  --size-xl: 1.25rem;   /* 20px */
  --size-2xl: 1.5rem;   /* 24px */
  --size-3xl: 2.0rem;   /* 32px */
  --size-4xl: 2.5rem;   /* 40px */
  --size-display-sm: 3.0rem;   /* 48px */
  --size-display: 4.0rem;   /* 64px */
  --size-display-lg: 4.5rem;   /* 72px */

  --leading-2xs: 1.55;
  --leading-xs: 1.5;
  --leading-sm: 1.5;
  --leading-md: 1.5;
  --leading-lg: 1.45;
  --leading-xl: 1.4;
  --leading-2xl: 1.35;
  --leading-3xl: 1.25;
  --leading-4xl: 1.2;
  --leading-display-sm: 1.15;
  --leading-display: 1.1;
  --leading-display-lg: 1.05;

  --tracking-2xs: 0.1px;
  --tracking-xs: 0px;
  --tracking-sm: 0px;
  --tracking-md: 0px;
  --tracking-lg: 0px;
  --tracking-xl: -0.1px;
  --tracking-2xl: -0.2px;
  --tracking-3xl: -0.3px;
  --tracking-4xl: -0.4px;
  --tracking-display-sm: -0.5px;
  --tracking-display: -0.75px;
  --tracking-display-lg: -1px;
}

/* App layer. Eleven styles, 11px to 24px. Nothing larger: a 32px heading
   inside a panel does not create hierarchy, it creates a hole. */
.fc-font-title-lg {
  font-family: var(--font-sans);
  font-size: var(--size-2xl);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.2px;
}
.fc-font-title {
  font-family: var(--font-sans);
  font-size: var(--size-xl);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.1px;
}
.fc-font-title-sm {
  font-family: var(--font-sans);
  font-size: var(--size-lg);
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: 0px;
}
.fc-font-title-xs {
  font-family: var(--font-sans);
  font-size: var(--size-md);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0px;
}
.fc-font-title-2xs {
  font-family: var(--font-sans);
  font-size: var(--size-sm);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0px;
}
.fc-font-body {
  font-family: var(--font-sans);
  font-size: var(--size-md);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0px;
}
.fc-font-body-emphasis {
  font-family: var(--font-sans);
  font-size: var(--size-md);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0px;
}
.fc-font-ui {
  font-family: var(--font-sans);
  font-size: var(--size-sm);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0px;
}
.fc-font-ui-emphasis {
  font-family: var(--font-sans);
  font-size: var(--size-sm);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0px;
}
.fc-font-label {
  font-family: var(--font-sans);
  font-size: var(--size-xs);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0px;
}
.fc-font-caption {
  font-family: var(--font-sans);
  font-size: var(--size-2xs);
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: 0.1px;
}

/* Website layer. Same primitives, shifted up. Never below 16px. */
.fc-font-web-hero-lg {
  font-family: var(--font-sans);
  font-size: var(--size-display-lg);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -1px;
}
.fc-font-web-hero {
  font-family: var(--font-sans);
  font-size: var(--size-display);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.75px;
}
.fc-font-web-hero-sm {
  font-family: var(--font-sans);
  font-size: var(--size-display-sm);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.5px;
}
.fc-font-web-heading-lg {
  font-family: var(--font-sans);
  font-size: var(--size-4xl);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.4px;
}
.fc-font-web-heading {
  font-family: var(--font-sans);
  font-size: var(--size-3xl);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.3px;
}
.fc-font-web-heading-sm {
  font-family: var(--font-sans);
  font-size: var(--size-2xl);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.2px;
}
.fc-font-web-lead {
  font-family: var(--font-sans);
  font-size: var(--size-xl);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -0.1px;
}
.fc-font-web-body {
  font-family: var(--font-sans);
  font-size: var(--size-lg);
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: 0px;
}

/* Opt into the serif on anything being looked at before it is read. Above 24px.
   It carries its own metrics, so pair it with a display size rather than a UI one. */
.fc-font-serif { font-family: var(--font-serif); }

/* Mono for values, identifiers, timestamps and micro-labels — anything that has to
   line up or be read exactly. Tabular figures are on by default in this face. */
.fc-font-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }