/* ========================================
   Author Font Face
   ======================================== */

@font-face {
  font-family: 'Author';
  src: url('../fonts/Author-Variable.woff2') format('woff2-variations'),
       url('../fonts/Author-Variable.woff') format('woff-variations');
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Author';
  src: url('../fonts/Author-VariableItalic.woff2') format('woff2-variations'),
       url('../fonts/Author-VariableItalic.woff') format('woff-variations');
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
}

/* ========================================
   CSS Variables
   ======================================== */

:root {
  /* Font Sizes (sorted by size) */
  --size-16: 1em;           /* 16px */
  --size-18: 1.125em;       /* 18px */
  --size-20: 1.25em;        /* 20px */
  --size-22: 1.375em;       /* 22px */
  --size-24: 1.5em;         /* 24px */
  --size-28: 1.75em;        /* 28px */
  --size-30: 1.875em;       /* 30px */
  --size-32: 2em;           /* 32px */
  --size-36: 2.25em;        /* 36px */
  --size-40: 2.5em;         /* 40px */
  --size-48: 3em;           /* 48px */
  --size-60: 3.75em;        /* 60px */
  --size-64: 4em;           /* 64px */
  --size-70: 4.375em;       /* 70px */
  --size-72: 4.5em;         /* 72px */
  --size-80: 5em;           /* 80px */
  --size-96: 6em;           /* 96px */
  --size-100: 6.25em;       /* 100px */

  /* Colors */
  --color-white: #FFFFFF;
  --color-black: #000000;
  --color-transparent: transparent;
  --color-gray-dark: #313131;
  --color-gray-medium: #232323;
  --color-gray-light: #656565;
  --color-gray-darker: #242424;
  --color-gray-darkest: #161616;
  --color-gray-medium-light: #838383;
  --color-gray-text: #53555B;
  --color-gray-contact-title: #3A414A;
  --color-gray-contact-menu: #414141;
  --color-gray-input-border: #707070;
  --color-gray-placeholder: #C9C9C9;
  --color-gray-social: #636363;
  --color-gray-blue-light: #556977;
  --color-blue-dark-medium: #132c3f;
  --color-orange: #E98823;
  --color-pink-light: #FFD4D5;
  --color-blue-dark: #001825;
  --color-blue-darker: #020C12;
  --color-blue-darkest: #03141E;
  --color-blue-bright: #2599D8;
  --color-blue-navy: #062D42;

  /* Gradients */
  --gradient-button-bg: linear-gradient(90deg, var(--color-black) 0%, var(--color-gray-dark) 100%);
  --gradient-button-border: linear-gradient(90deg, rgba(35, 35, 35, 0) 24.9%, var(--color-gray-light) 72.91%);
  --gradient-cta-bg: linear-gradient(90deg, var(--color-gray-blue-light) 0%, var(--color-blue-dark-medium) 100%);
  --gradient-cta-border: linear-gradient(90deg, var(--color-gray-blue-light) 0%, var(--color-white) 100%);
  --gradient-features-button-bg: linear-gradient(90deg, #1f2528 0%, var(--color-blue-darker) 100%);
  --gradient-features-button-border: linear-gradient(90deg, #1f2528 0%, #1f2528 40%, rgba(255, 255, 255, 0.6) 100%);
  --gradient-features-page-button-bg: linear-gradient(90deg, #183245 0%, #475b69 100%);
  --gradient-features-page-button-border: linear-gradient(90deg, #183245 0%, rgba(255, 255, 255, 0.8) 100%);
  --gradient-blog-button-bg: linear-gradient(90deg, #ebebeb 0%, #e1e1e1 100%);
  --gradient-blog-button-border: linear-gradient(90deg, #ebebeb 0%, #cacaca 100%);
  --gradient-home-button-bg: linear-gradient(90deg, #070f15 0%, #23282d 100%);
  --gradient-home-button-border: linear-gradient(90deg, #070f15 0%, var(--color-gray-light) 100%);

  /* Border */
  --border-width-thin: 1px;
  --border-radius-pill: 10000px;

  /* Spacing */
  --navbar-brand-height: 75px;
  --button-padding-vertical: 5px;
  --button-padding-horizontal: 10px;

  /* Filters */
  --filter-invert-white: brightness(0) invert(1);
}

html {
  font-size: 16px; /* Desktop base font size */
}

body {
  font-family: 'Author', 'Ubuntu', sans-serif;
}

/* Responsive Base Font Size */
@media (max-width: 991px) {
  html {
    font-size: 15px; /* Tablet base font size */
  }
}

@media (max-width: 767px) {
  html {
    font-size: 14px; /* Mobile base font size */
  }
}

/* Font Size Utility Classes (sorted) */
.fs-16 { font-size: var(--size-16); }
.fs-18 { font-size: var(--size-18); }
.fs-20 { font-size: var(--size-20); }
.fs-22 { font-size: var(--size-22); }
.fs-24 { font-size: var(--size-24); }
.fs-28 { font-size: var(--size-28); }
.fs-30 { font-size: var(--size-30); }
.fs-32 { font-size: var(--size-32); }
.fs-36 { font-size: var(--size-36); }
.fs-40 { font-size: var(--size-40); }
.fs-48 { font-size: var(--size-48); }
.fs-60 { font-size: var(--size-60); }
.fs-64 { font-size: var(--size-64); }
.fs-70 { font-size: var(--size-70); }
.fs-72 { font-size: var(--size-72); }
.fs-80 { font-size: var(--size-80); }
.fs-96 { font-size: var(--size-96); }
.fs-100 { font-size: var(--size-100); }

@media (min-width: 576px) {
  .container,
  .container-sm {
    max-width: 593px;
  }
}

@media (min-width: 768px) {
  .container,
  .container-sm,
  .container-md {
    max-width: 791px;
  }
}

@media (min-width: 992px) {
  .container,
  .container-sm,
  .container-md,
  .container-lg {
    max-width: 1055px;
  }
}

@media (min-width: 1200px) {
  .container,
  .container-sm,
  .container-md,
  .container-lg,
  .container-xl {
    max-width: 1252px;
  }
}

@media (min-width: 1400px) {
  .container,
  .container-sm,
  .container-md,
  .container-lg,
  .container-xl,
  .container-xxl {
    max-width: 1450px;
  }
}