// Font
@use "sass:math";

$font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
$font-family-headings: $font-family-base;
$font-family-controls: $font-family-base;
$font-family-narrow: "Arial Narrow", sans-serif;
$font-family-serif: "Georgia", serif;
$font-family-code: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
$font-family-mono: $font-family-code;

// Grid
$grid-width: 1200;
$grid-gutter-width: 0.5rem;

// Type scale (rem-based, 16px root)
$font-size-xs:   0.75rem;   // 12px
$font-size-sm:   0.875rem;  // 14px
$font-size-base: 1rem;      // 16px
$font-size-lg:   1.125rem;  // 18px
$font-size-xl:   1.5rem;    // 24px
$font-size-2xl:  1.875rem;  // 30px
$font-size-3xl:  2.25rem;   // 36px
$font-size-4xl:  3rem;      // 48px
$font-size-5xl:  3.75rem;   // 60px

$font-size-print: 12pt;

// Backward-compatible aliases
$font-size-big: $font-size-lg;
$font-size-small: $font-size-sm;
$font-size-smaller: $font-size-xs;
$font-size-lead: $font-size-xl;
$line-height-lead: 1.5;

// Font weights
$font-weight-normal: 400;
$font-weight-medium: 500;
$font-weight-semibold: 600;
$font-weight-bold: 700;
$header-font-weight: $font-weight-semibold;

// Line heights
$line-height-tight: 1.25;
$line-height-snug: 1.375;
$line-height-normal: 1.5;
$line-height-relaxed: 1.625;
$base-line: 1.5rem; // 24px

// Line heights per text size (Tailwind convention)
$line-height-xs:   1rem;      // 16px for 12px text
$line-height-sm:   1.25rem;   // 20px for 14px text
$line-height-base: 1.5rem;    // 24px for 16px text
$line-height-lg:   1.75rem;   // 28px for 18px text
$line-height-xl:   2rem;      // 32px for 24px text
$line-height-2xl:  2.25rem;   // 36px for 30px text
$line-height-3xl:  2.5rem;    // 40px for 36px text
$line-height-4xl:  1;         // 48px for 48px text
$line-height-5xl:  1;         // 60px for 60px text

// HEADINGS

// print
$font-size-h1-print: 36pt;
$font-size-h2-print: 24pt;
$font-size-h3-print: 18pt;
$font-size-h4-print: 14pt;
$font-size-h5-print: 12pt;
$font-size-h6-print: 12pt;

// Large desktop
$font-size-h1-lg: $font-size-5xl;  // 60px
$font-size-h2-lg: $font-size-4xl;  // 48px
$font-size-h3-lg: $font-size-3xl;  // 36px
$font-size-h4-lg: $font-size-2xl;  // 30px
$font-size-h5-lg: $font-size-xl;   // 24px
$font-size-h6-lg: $font-size-sm;   // 14px

// Portrait tablet to landscape and desktop
$font-size-h1-md: $font-size-4xl;  // 48px
$font-size-h2-md: $font-size-3xl;  // 36px
$font-size-h3-md: $font-size-2xl;  // 30px
$font-size-h4-md: $font-size-xl;   // 24px
$font-size-h5-md: $font-size-lg;   // 18px
$font-size-h6-md: $font-size-sm;   // 14px

// Landscape phone to portrait tablet
$font-size-h1-sm: $font-size-3xl;  // 36px
$font-size-h2-sm: $font-size-2xl;  // 30px
$font-size-h3-sm: $font-size-xl;   // 24px
$font-size-h4-sm: $font-size-lg;   // 18px
$font-size-h5-sm: $font-size-base; // 16px
$font-size-h6-sm: $font-size-sm;   // 14px

// Unit scale — shared by grid, container queries, and push utilities
$unit-scale: (
  100: 100%, 90: 90%, 88: 87.5%, 80: 80%, 75: 75%, 70: 70%,
  66: 66.6%, 65: 65%, 62: 62.5%, 60: 60%, 50: 50%, 40: 40%,
  38: 37.5%, 35: 35%, 33: 33.3%, 30: 30%, 25: 25%, 20: 20%,
  12: 12.5%, 10: 10%
);

// Width scale — shared by width/height utilities and responsive width classes
$width-scale: (
  100: 100%, 90: 90%, 80: 80%, 75: 75%, 70: 70%,
  66: 66.6%, 65: 65%, 60: 60%, 50: 50%, 40: 40%,
  35: 35%, 33: 33.3%, 30: 30%, 25: 25%, 20: 20%, 10: 10%
);

// Base padding and spacing
$padding: 0.75rem;
$margin: 0.75rem;
$border-radius: 0.25rem;
$button-radius: 2rem;
$shadow-depth: $grid-gutter-width * 0.5;

// Input & Button Padding
$padding-input-base: 0.5rem;
$padding-btn-base: 0.625rem;
$padding-btn-side-base: 1.5rem;
$padding-btn-side-in-forms-base: 1rem;

$padding-input: $padding-input-base 0.35rem;
$padding-btn: $padding-btn-base $padding-btn-side-base;
$padding-btn-outline: $padding-btn-base - (math.div(1, 16) * 1rem) $padding-btn-side-base;
$padding-btn-outline-bold: $padding-btn-base - (math.div(1, 16) * 2rem) $padding-btn-side-base;
$padding-btn-in-forms: $padding-input-base + (math.div(1, 16) * 1rem) $padding-btn-side-in-forms-base;
$padding-btn-outline-in-forms: $padding-input-base $padding-btn-side-in-forms-base;
$padding-btn-outline-bold-in-forms: $padding-input-base - (math.div(1, 16) * 1rem) $padding-btn-side-in-forms-base;