// ==============================================
// 🎨 Text Color Utilities
// ==============================================

// 👉 Breakpoints & Fonts
$screen-xs: 767px;

$font-berlingske: 'Berlingske Serif';
$font-calibre: 'Calibre';

$primary-filter: brightness(0) saturate(100%) invert(48%) sepia(74%) saturate(4990%) hue-rotate(331deg) brightness(105%) contrast(101%);
$white-filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(93deg) brightness(103%) contrast(103%);
$black-filter: brightness(0) saturate(100%) invert(0%) sepia(2%) saturate(0%) hue-rotate(226deg) brightness(94%) contrast(99%);
$dark-gray-filter: brightness(0) saturate(100%) invert(8%) sepia(3%) saturate(31%) hue-rotate(317deg) brightness(109%) contrast(91%);
$soft-gray-filter: brightness(0) saturate(100%) invert(30%) sepia(0%) saturate(1093%) hue-rotate(88deg) brightness(97%) contrast(84%);
$cool-gray-filter: brightness(0) saturate(100%) invert(43%) sepia(6%) saturate(50%) hue-rotate(202deg) brightness(90%) contrast(87%);
$light-gray-filter: brightness(0) saturate(100%) invert(93%) sepia(0%) saturate(0%) hue-rotate(205deg) brightness(88%) contrast(83%);
$dark-red-filter: brightness(0) saturate(100%) invert(34%) sepia(17%) saturate(4616%) hue-rotate(320deg) brightness(84%) contrast(100%);
$soft-red-filter: brightness(0) saturate(100%) invert(35%) sepia(82%) saturate(2730%) hue-rotate(332deg) brightness(92%) contrast(94%);

$transition-01: all .3s ease-in-out;


// ----------------------------
// 🔵 Brand Colors
// ----------------------------

.color-primary   { color: $primary-01; }
.text-color-primary { color: $cool-gray-08; }
.text-color-secondary  { color: $cool-gray-09; }


// ----------------------------
// ⚫ Neutral Colors
// ----------------------------

.color-black     { color: $black; }
.color-white     { color: $white; }
.color-gray-01      { color: $cool-gray-08; }
.color-gray-02      { color: $cool-gray-05; }
.color-gray-03      { color: $cool-gray-12; }
.color-purple-01      { color: $purple-05; }
.color-blue-01      { color: $blue-09; }
.color-red-01      { color: $dark-red-05; }
.color-red-02      { color: $bright-red-16; }
.color-green-01      { color: $green-09; }
.color-blue-02      { color: $blue-01; }


// ----------------------------
// 🟢 Status Colors
// ----------------------------

.color-success   { /* color: $success-color; */ }
.color-error     { /* color: $error-color; */ }
.color-warning   { /* color: $warning-color; */ }
.color-info      { /* color: $info-color; */ }



// ==============================================
// 🔠 Font Family Utilities (Including Variables)
// ==============================================

// 👉 Font Variables
//$font-primary: 'Calibre', sans-serif;
//$font-secondary: 'Berlingske Serif', serif;

// 👉 Font Family Classes
.font-primary    { font-family: $font-calibre; }
.font-secondary  { font-family: $font-berlingske; }


// ==============================================
// 💪 Font Weight Utilities
// ==============================================

// ----------------------------
// 🔢 Numeric Weights
// ----------------------------

.w-100 { font-weight: 100; }
.w-200 { font-weight: 200; }
.w-300 { font-weight: 300; }
.w-400 { font-weight: 400; }
.w-500 { font-weight: 500; }
.w-600 { font-weight: 600; }
.w-700 { font-weight: 700; }
.w-800 { font-weight: 800; }
.w-900 { font-weight: 900; }

// ==============================================
// 🔤 Font Size Utilities
// ==============================================

.f-lh-same {
  line-height: 1 !important;
}
@for $i from 1 through 200 {
  .f-#{$i} {
    font-size: #{$i}px;
    line-height: #{$i + 4}px;
  }
}
@media screen and (max-width: $screen-xs) {
  @for $i from 1 through 200 {
    .f-sm-#{$i} {
      font-size: #{$i}px;
      line-height: #{$i + 4}px;
    }
  }
}
@media screen and (max-width: 991px) and (min-width: 768px) {
  @for $i from 1 through 200 {
    .f-md-#{$i} {
      font-size: #{$i}px;
      line-height: #{$i + 4}px;
    }
  }
}
@media screen and (max-width: 1199px) and (min-width: 992px) {
  @for $i from 1 through 200 {
    .f-lg-#{$i} {
      font-size: #{$i}px;
      line-height: #{$i + 4}px;
    }
  }
}
@media screen and (max-width: $screen-xs) {
  .p-sm-lr-24{
    padding-left: 24px;
    padding-right: 24px;
  }
  .p-sm-lr-32{
    padding-left: 32px;
    padding-right: 32px;
  }
}



// ==============================================
// 🔤 Margin Utilities
// ==============================================

@mixin generate-margin-classes($prefix, $direction, $property) {
  @for $i from 0 through 200 {
    .#{$prefix}-#{$i} {
      #{$property}: #{$i}px !important;
    }
  }
}

// Default (base)
@include generate-margin-classes('mt', 'top', 'margin-top');
@include generate-margin-classes('mb', 'bottom', 'margin-bottom');
@include generate-margin-classes('ml', 'left', 'margin-left');
@include generate-margin-classes('mr', 'right', 'margin-right');

// Small screens
@media screen and (max-width: $screen-xs) {
  @include generate-margin-classes('mt-sm', 'top', 'margin-top');
  @include generate-margin-classes('mb-sm', 'bottom', 'margin-bottom');
  @include generate-margin-classes('ml-sm', 'left', 'margin-left');
  @include generate-margin-classes('mr-sm', 'right', 'margin-right');
}

// Medium screens
@media screen and (max-width: 991px) and (min-width: 768px) {
  @include generate-margin-classes('mt-md', 'top', 'margin-top');
  @include generate-margin-classes('mb-md', 'bottom', 'margin-bottom');
  @include generate-margin-classes('ml-md', 'left', 'margin-left');
  @include generate-margin-classes('mr-md', 'right', 'margin-right');
}

// Large screens
@media screen and (max-width: 1199px) and (min-width: 992px) {
  @include generate-margin-classes('mt-lg', 'top', 'margin-top');
  @include generate-margin-classes('mb-lg', 'bottom', 'margin-bottom');
  @include generate-margin-classes('ml-lg', 'left', 'margin-left');
  @include generate-margin-classes('mr-lg', 'right', 'margin-right');
}



// ==============================================
// 🔤 Padding Utilities
// ==============================================

@mixin generate-padding-classes($prefix, $direction, $property) {
  @for $i from 0 through 200 {
    .#{$prefix}-#{$i} {
      #{$property}: #{$i}px !important;
    }
  }
}

// Default (base)
@include generate-padding-classes('pt', 'top', 'padding-top');
@include generate-padding-classes('pb', 'bottom', 'padding-bottom');
@include generate-padding-classes('pl', 'left', 'padding-left');
@include generate-padding-classes('pr', 'right', 'padding-right');

// Small screens
@media screen and (max-width: $screen-xs) {
  @include generate-padding-classes('pt-sm', 'top', 'padding-top');
  @include generate-padding-classes('pb-sm', 'bottom', 'padding-bottom');
  @include generate-padding-classes('pl-sm', 'left', 'padding-left');
  @include generate-padding-classes('pr-sm', 'right', 'padding-right');
}

// Medium screens
@media screen and (max-width: 991px) and (min-width: 768px) {
  @include generate-padding-classes('pt-md', 'top', 'padding-top');
  @include generate-padding-classes('pb-md', 'bottom', 'padding-bottom');
  @include generate-padding-classes('pl-md', 'left', 'padding-left');
  @include generate-padding-classes('pr-md', 'right', 'padding-right');
}

// Large screens
@media screen and (max-width: 1199px) and (min-width: 992px) {
  @include generate-padding-classes('pt-lg', 'top', 'padding-top');
  @include generate-padding-classes('pb-lg', 'bottom', 'padding-bottom');
  @include generate-padding-classes('pl-lg', 'left', 'padding-left');
  @include generate-padding-classes('pr-lg', 'right', 'padding-right');
}





// ==============================================
// 🔠 Text Transform Utilities
// ==============================================

.text-uppercase   { text-transform: uppercase; }
.text-lowercase   { text-transform: lowercase; }
.text-capitalize  { text-transform: capitalize; }
.ls-14  { letter-spacing: 1.4px; }


// ==============================================
// 🔠 Responsive Visibility Utilities
// ==============================================

.desktop-visible{
  @media screen and (max-width: $screen-xs) {
    display: none!important;
  }
}

.mobile-visible{
  display: none!important;
  @media screen and (max-width: $screen-xs) {
    display: block!important;
  }
}