@use 'sass:math';

/**********************
* SOME MATH
************************/
@import './styles/math.scss';

$colors:
   // Surface
  'surface-0' transparent,
  'surface-1' rgba(white, 0.04),
  'surface-2' rgba(white, 0.06),
  'surface-3' rgba(white, 0.08),
  'surface-4' rgba(white, 0.12),
  /**********
  * Accent colors *
  **********/ // Accent
  'accent-10' #0d2759,
  'accent-20' #1c53bf,
  'accent-30' #256cfa,
  'accent-40' #4584ff,
  'accent-50' #80abff,
  'accent-60' #ccddff,
  // Feedback/Error
  'error-10' #661018,
  'error-20' #a61b27,
  'error-30' #e52535,
  'error-40' #f26d78,
  'error-50' #f29199,
  'error-60' #f2dadc,
  // Feedback/Warning
  'warning-10' #73500b,
  'warning-20' #996b0f,
  'warning-30' #f2c53d,
  'warning-40' #f2d785,
  'warning-50' #f2e0aa,
  'warning-60' #f2e9ce,
  // Feedback/Success
  'success-10' #045944,
  'success-20' #0e8c6d,
  'success-30' #14cc9e,
  'success-40' #4cd9b6,
  'success-50' #89e5ce,
  'success-60' #daf2ec,
  /**********
  * Neutral colors *
  **********/ 'neutral-0' #131313,
  'neutral-5' #1e1e1e,
  'neutral-10' #252525,
  'neutral-20' #2f2f2f,
  'neutral-30' #3e3e3e,
  'neutral-40' #535353,
  'neutral-50' #6c6c6c,
  'neutral-60' #848484,
  'neutral-70' #a9a9a9,
  'neutral-80' #c2c2c2,
  'neutral-90' #dadada,
  'neutral-100' #fcfcfc,
  /**********
  * Support colors *
  **********/ // Support/Primary
  'support-primary-10' #3c302a,
  'support-primary-20' #6a5549,
  'support-primary-30' #a48a7b,
  'support-primary-40' #c1afa4,
  'support-primary-50' #d5c9c3,
  'support-primary-60' #eae4e1,
  // Support/Secondary
  'support-secondary-10' #003366,
  'support-secondary-20' #0059b2,
  'support-secondary-30' #0d86ff,
  'support-secondary-40' #4ca6ff,
  'support-secondary-50' #80bfff,
  'support-secondary-60' #e5f2ff,
  // Support/tertiary
  'support-tertiary-10' #591b3f,
  'support-tertiary-20' #a63275,
  'support-tertiary-30' #cc47a0,
  'support-tertiary-40' #e065c2,
  'support-tertiary-50' #e087ca,
  'support-tertiary-60' #f2cee9,
  // Support/quaternary
  'support-quaternary-10' #492b8f,
  'support-quaternary-20' #5f38b9,
  'support-quaternary-30' #7850d2,
  'support-quaternary-40' #936cec,
  'support-quaternary-50' #ae90f0,
  'support-quaternary-60' #c8b5f3,
  /**********
  * Brand colors *
  **********/ // Brand/Primary
  'brand-primary-bright' #ffff00,
  'brand-primary-10' #5a2820,
  'brand-primary-20' #aa6739,
  'brand-primary-30' #ecb54f,
  'brand-primary-40' #f0c665,
  'brand-primary-50' #f5d77c,
  'brand-primary-60' #fae794,
  // Brand/Secondary
  'brand-secondary-bright' #01dccd,
  'brand-secondary-10' #173343,
  'brand-secondary-20' #296d79,
  'brand-secondary-30' #57ada1,
  'brand-secondary-40' #7dbcac,
  'brand-secondary-50' #9dcbba,
  'brand-secondary-60' #bcdacb,
  // Brand/Tertiary
  'brand-tertiary-bright' #ff0000,
  'brand-tertiary-10' #4c1726,
  'brand-tertiary-20' #9a1e2d,
  'brand-tertiary-30' #e6332a,
  'brand-tertiary-40' #f86a6a,
  'brand-tertiary-50' #f89fb4,
  'brand-tertiary-60' #efd1de,
  // Brand/Quaternary
  'brand-quaternary-10' #46372c,
  'brand-quaternary-20' #735f52,
  'brand-quaternary-30' #a48a7b,
  'brand-quaternary-40' #bba08e,
  'brand-quaternary-50' #d3b7a1,
  'brand-quaternary-60' #eaceb4,
  'black' #000000;

/**********************
* FONT
************************/
$font-family: 'Roboto Flex', serif;
$font-family-brand: 'Roboto Flex', serif;
$font-family-login: 'Iskry', 'Roboto Flex', sans-serif;
$font-mono: 'Source Code Pro', monospace;
$font-weight: normal;
$font-style: normal;
$font-weight: 400;
$font-weight-header: 400;
$font-micro: 10px;
$font-small: 12px;
$font-base: 14px;
$font-variation-settings: '"slnt" 0, "wdth" 78, "GRAD" -30, "XOPQ" 96, "XTRA" 468, "YOPQ" 79, "YTAS" 674, "YTDE" -203, "YTFI" 710, "YTLC" 490, "YTUC" 670';
$font-variation-settings-brand: '"slnt" 0, "wdth" 110, "GRAD" 40, "XOPQ" 85, "XTRA" 486, "YOPQ" 79, "YTAS" 680, "YTDE" -203, "YTFI" 710, "YTLC" 508, "YTUC" 680';

/**********************
* SPACING
************************/
$space-none: 0px;
$space-xxs: 2px;
$space-xs: 4px;
$space-s: 8px;
$space-sm: 12px;
$space-m: 16px;
$space-l: 24px;
$space-xl: 32px;
$space-xxl: 48px;
$space-xxxl: 64px;
$space:
  'xxs' $space-xxs,
  'xs' $space-xs,
  's' $space-s,
  'sm' $space-sm,
  'm' $space-m,
  'l' $space-l,
  'xl' $space-xl,
  'xxl' $space-xxl,
  'xxxl' $space-xxxl,
  'none' $space-none;

/**********************
* SIZES
************************/
$size-xs: 16px;
$size-s: 24px;
$size-base: 32px;
$size-m: 40px;
$size-l: 48px;
$size-xl: 64px;
$size-xxl: 80px;
$size-256: 256px;
$size-512: 512px;
$sizes:
  'xs' $size-xs,
  's' $size-s,
  'base' $size-base,
  'm' $size-m,
  'l' $size-l,
  'xl' $size-xl,
  'xxl' $size-xxl,
  '256' $size-256,
  '512' $size-512;

/**
* Get font size base on base font size
* scaling = round(size * 1.200) (Minor Third)
*/
@function getFontSize($baseOffset) {
  $size: $font-base;
  @for $i from 1 through $baseOffset {
    $size: round($size * 1.2);
  }
  @return $size;
}

@mixin fontSize($size) {
  $e: 2.71828182846;
  font-size: $size;
  font-style: $font-style;
  line-height: ceil(math.div(($size * 1.3), 8)) * 8;
  letter-spacing: #{(-0.0223 + 0.185 * pow($e, -0.1745 * $size)) * 1em};
  @if $size > $font-base {
    font-weight: $font-weight-header;
  } @else {
    font-weight: $font-weight;
  }
}

@mixin font($size, $family: $font-family) {
  font-family: $family;
  color: var(--color-neutral-100);
  @include fontSize($size);
}