Typography

/**
 * Generates an @font-face declaration with multiple formats
 * @param $font-family - The font-family name
 * @param $file-path - Path to font files (without extension)
 * @param $file-formats - List of formats to include (optional, uses global setting)
 * @param $asset-pipeline - Enable Rails Asset Pipeline support (optional, uses global setting)
 * @content - Additional CSS properties (font-weight, font-style, unicode-range, etc.)
 */
@mixin font-face($font-family, $file-path, $file-formats: null, $asset-pipeline: null);

@include font-face(
  "source-sans-pro",
  "fonts/source-sans-pro-regular",
  ("woff2", "woff")
) {
  font-style: normal;
  font-weight: 400;
}

// Result:
@font-face {
  font-family: "source-sans-pro";
  src: url("fonts/source-sans-pro-regular.woff2") format("woff2"),
       url("fonts/source-sans-pro-regular.woff") format("woff");
  font-style: normal;
  font-weight: 400;
}

// With Rails Asset Pipeline
@include font-face(
  "custom-font",
  "custom-font-bold",
  ("ttf", "woff"),
  true
) {
  font-weight: bold;
}

/**
 * Increments up or down a defined scale for consistent measurements
 * @param $increment - How many steps to increment up (positive) or down (negative)
 * @param $value - Base value the scale starts at (optional, uses global setting)
 * @param $ratio - The ratio the scale is built on (optional, uses global setting)
 * @returns number-with-unit - The calculated value at the specified increment
 */
@function modular-scale($increment, $value: null, $ratio: null);

.small-text {
  font-size: modular-scale(-1);    // Smaller than base
}

.base-text {
  font-size: modular-scale(0);     // Base size (1em by default)
}

.large-text {
  font-size: modular-scale(2);     // Two steps larger
  // Result: 1.5625em (with default major-third ratio)
}

.extra-large {
  font-size: modular-scale(3, 2em); // Custom base value
  // Result: 3.90625em
}

.custom-ratio {
  font-size: modular-scale(3, 1em 1.6em, $major-seventh);
  // Result: 3em (using dual-stranded scale)
}

// Configure global modular scale settings
$bourbon: (
  "modular-scale-base": 1rem,
  "modular-scale-ratio": 1.2,
);

// Modern system font stack
$font-stack-system: (
  system-ui,
  -apple-system,
  BlinkMacSystemFont,
  "Avenir Next",
  "Avenir",
  "Segoe UI",
  "Lucida Grande",
  "Helvetica Neue",
  "Helvetica",
  "Fira Sans",
  "Roboto",
  "Noto",
  "Droid Sans",
  "Cantarell",
  "Oxygen",
  "Ubuntu",
  "Franklin Gothic Medium",
  "Century Gothic",
  "Liberation Sans",
  sans-serif,
);

// Traditional Helvetica stack
$font-stack-helvetica: (
  "Helvetica Neue",
  "Helvetica",
  "Arial",
  sans-serif,
);

// Lucida Grande stack
$font-stack-lucida-grande: (
  "Lucida Grande",
  "Lucida Sans Unicode",
  "Geneva",
  "Verdana",
  sans-serif,
);

// Verdana stack
$font-stack-verdana: (
  "Verdana",
  "Geneva", 
  sans-serif,
);

// Garamond stack
$font-stack-garamond: (
  "Garamond",
  "Baskerville",
  "Baskerville Old Face",
  "Hoefler Text",
  "Times New Roman",
  serif,
);

// Georgia stack
$font-stack-georgia: (
  "Georgia",
  "Times",
  "Times New Roman",
  serif,
);

// Hoefler Text stack
$font-stack-hoefler-text: (
  "Hoefler Text",
  "Baskerville Old Face",
  "Garamond",
  "Times New Roman",
  serif,
);

// Consolas stack
$font-stack-consolas: (
  "Consolas",
  "monaco",
  monospace,
);

// Courier New stack
$font-stack-courier-new: (
  "Courier New",
  "Courier",
  "Lucida Sans Typewriter",
  "Lucida Typewriter",
  monospace,
);

// Monaco stack
$font-stack-monaco: (
  "Monaco",
  "Consolas",
  "Lucida Console",
  monospace,
);

.body-text {
  font-family: $font-stack-system;
}

.serif-heading {
  font-family: $font-stack-garamond;
}

.code-block {
  font-family: $font-stack-consolas;
}

$minor-second: 1.067;
$major-second: 1.125;
$minor-third: 1.2;
$major-third: 1.25;          // Default Bourbon ratio
$perfect-fourth: 1.333;
$augmented-fourth: 1.414;
$perfect-fifth: 1.5;
$minor-sixth: 1.6;
$golden: 1.618;              // Golden ratio
$major-sixth: 1.667;
$minor-seventh: 1.778;
$major-seventh: 1.875;
$octave: 2;
$major-tenth: 2.5;
$major-eleventh: 2.667;
$major-twelfth: 3;
$double-octave: 4;

// Using pre-defined ratios
.tight-scale {
  font-size: modular-scale(2, 1rem, $minor-second);
}

.dramatic-scale {
  font-size: modular-scale(3, 1rem, $octave);
}

.golden-scale {
  font-size: modular-scale(2, 1rem, $golden);
}

$bourbon: (
  "global-font-file-formats": ("woff2", "woff", "ttf"),
  "modular-scale-base": 1rem,
  "modular-scale-ratio": $perfect-fourth,
  "rails-asset-pipeline": true,
);