/* UI Specific Variables */
:root {
  /* Spacing */
  --ui-spacing-hairline: 0.0625rem;
  --ui-spacing-tight: 0.125rem;
  --ui-spacing-snug: 0.25rem;
  --ui-spacing-cozy: 0.375rem;
  --ui-spacing-comfortable:0.5rem;
  --ui-spacing-relaxed: 0.625rem;
  --ui-spacing-spacious: 0.75rem;
  --ui-spacing-generous: 0.875rem;
  --ui-spacing-luxurious: 1rem;
  --ui-spacing-expansive: 1.25rem;

  /* Font Size */
  --ui-typo-size-2xs: 0.5625rem;
  --ui-typo-size-xs: 0.625rem;
  --ui-typo-size-sm: 0.6875rem;
  --ui-typo-size-md: 0.8125rem;
  --ui-typo-size-lg: 0.875rem;
  --ui-typo-size-xl: 1rem;
  --ui-typo-size-2xl: 1.25rem;
  --ui-typo-size-3xl: 1.5rem;
  --ui-typo-size-4xl: 1.75rem;
  --ui-typo-size-5xl: 2rem;

  /* === MastHead === */
  --ui-masthead-font-size: var(--ui-font-size-xl);
  --ui-masthead-line-height: var(--typo-leading-snug);
  --ui-masthead-paddingY: var(--ui-spacing-relaxed);
  --ui-masthead-height: calc(
    (var(--ui-masthead-font-size) * var(--ui-masthead-line-height)) +
    (var(--ui-masthead-paddingY) * 2)
  );

  /* === Content/Marginalia === */
  --ui-content-width: minmax(0, 72ch);
  --ui-margin-width: minmax(18ch, 1fr);
  --ui-layout-width: 90rem;
}
