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

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

$calibre: 'Calibre';
$caveat: 'Caveat';
$berlingske: 'Berlingske Serif';

$primary-filter: brightness(0) saturate(100%) invert(27%) sepia(83%) saturate(3968%) hue-rotate(335deg) brightness(101%) 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%);
$text-filter: brightness(0) saturate(100%) invert(32%) sepia(2%) saturate(4956%) hue-rotate(178deg) brightness(93%) contrast(79%);
$btn-disable-filter: brightness(0) saturate(100%) invert(95%) sepia(5%) saturate(12%) hue-rotate(314deg) brightness(85%) contrast(86%);

$tag-red-filter: brightness(0) saturate(100%) invert(42%) sepia(42%) saturate(3541%) hue-rotate(340deg) brightness(97%) contrast(94%);
$tag-gray-filter: brightness(0) saturate(100%) invert(78%) sepia(0%) saturate(309%) hue-rotate(28deg) brightness(93%) contrast(83%);
$tag-orange-filter: brightness(0) saturate(100%) invert(58%) sepia(96%) saturate(1213%) hue-rotate(3deg) brightness(101%) contrast(103%);
$tag-green-filter: brightness(0) saturate(100%) invert(62%) sepia(14%) saturate(1480%) hue-rotate(83deg) brightness(100%) contrast(86%);
$tag-indigo-filter: brightness(0) saturate(100%) invert(70%) sepia(97%) saturate(4184%) hue-rotate(208deg) brightness(103%) contrast(101%);
$tag-purple-filter: brightness(0) saturate(100%) invert(51%) sepia(88%) saturate(7493%) hue-rotate(268deg) brightness(100%) contrast(104%);



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


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

.color-primary   { color: $primary-01; }


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

.color-black { color: $black; }
.color-white { color: $white; }
.color-white-01 { color: $text-07; }
.color-heading {color: $text-03}
.color-text {color: $text-03}
.color-gray-01 {color: $text-04}
.color-blue-01 {color: $text-05}

// ----------------------------
// 🟢 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-heading    { font-family: $berlingske; }
.font-text    { font-family: $calibre; }
.font-signature    { font-family: $caveat; }


// ==============================================
// 💪 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
// ==============================================
// Usage:
//   f-{n}       → font-size: {n}px; line-height: {n+8}px (global)
//   f-sm-{n}    → font-size: {n}px; line-height: {n+8}px on small screens (≤576px)
//   f-md-{n}    → font-size: {n}px; line-height: {n+8}px on medium screens (768px–991px)
//   f-lg-{n}    → font-size: {n}px; line-height: {n+8}px on large screens (992px–1199px)
//   f-xl-{n}    → font-size: {n}px; line-height: {n+8}px on large screens (1200px–1366px)
//   f-xxl-{n}    → font-size: {n}px; line-height: {n+8}px on large screens (≥1367px)
//
// Extra Responsive Padding Helpers (mobile only):
//   p-sm-lr-24  → padding-left: 24px; padding-right: 24px on small screens (≤576px)
//   p-sm-lr-32  → padding-left: 32px; padding-right: 32px on small screens (≤576px)
//
// Examples:
//   <p class="f-16">Font size 16px with line-height 24px</p>
//   <h1 class="f-32 f-md-40 f-lg-48">Responsive font size</h1>
//   <div class="f-sm-20">Font size 20px only on small screens</div>
//   <div class="p-sm-lr-24">24px left & right padding on small screens</div>
// ==============================================


@for $i from 1 through 200 {
  .f-#{$i} {
    font-size: #{$i}px;
    line-height: #{$i + 6}px;
  }
}
@media screen and (max-width: $screen-xs) {
  @for $i from 1 through 200 {
    .f-sm-#{$i} {
      font-size: #{$i}px;
      line-height: #{$i + 6}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 + 6}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 + 6}px;
    }
  }
}
@media screen and (max-width: 1366px) and (min-width: 1200px) {
  @for $i from 1 through 200 {
    .f-xl-#{$i} {
      font-size: #{$i}px;
      line-height: #{$i + 6}px;
    }
  }
}
@media screen and (min-width: 1400px) {
  @for $i from 1 through 200 {
    .f-xxl-#{$i} {
      font-size: #{$i}px;
      line-height: #{$i + 6}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;
  }
}


// ==============================================
// 📏 Line Height Utilities
// ==============================================
// Usage:
//   lh-{n}       → line-height: {n}px (global)
//   lh-sm-{n}    → line-height: {n}px on small screens (≤576px)
//   lh-md-{n}    → line-height: {n}px on medium screens (768px–991px)
//   lh-lg-{n}    → line-height: {n}px on large screens (992px–1199px)
//   lh-xl-{n}    → line-height: {n}px on extra large screens (≥1200px)
//   lh-xxl-{n}    → line-height: {n}px on extra large screens (≥1400px)
//
// Special Utility:
//   f-lh-same    → line-height: 1 (forces tight line height)
//
// Examples:
//   <p class="lh-24">Line height 24px globally</p>
//   <h1 class="lh-sm-30 lh-md-40 lh-lg-50">Responsive line height</h1>
//   <p class="lh-xl-60">Apply 60px line height only on xl screens</p>
//   <span class="f-lh-same">Text with line-height: 1</span>
// ==============================================


.f-lh-same {
  line-height: 1 !important;
}

// Default (global)
@for $i from 1 through 200 {
  .lh-#{$i} {
    line-height: #{$i}px;
  }
}

// Small (Mobile)
@media screen and (max-width: $screen-xs) {
  @for $i from 1 through 200 {
    .lh-sm-#{$i} {
      line-height: #{$i}px;
    }
  }
}

// Medium (Ipad)
@media screen and (max-width: 991px) and (min-width: 768px) {
  @for $i from 1 through 200 {
    .lh-md-#{$i} {
      line-height: #{$i}px;
    }
  }
}

// Large (Ipad Pro)
@media screen and (max-width: 1199px) and (min-width: 992px) {
  @for $i from 1 through 200 {
    .lh-lg-#{$i} {
      line-height: #{$i}px;
    }
  }
}
// Desktop (Small Desktop)

@media screen and (min-width: 1200px) {
  @for $i from 1 through 200 {
    .lh-xl-#{$i} {
      line-height: #{$i}px;
    }
  }
}
// Desktop (Large Desktop)
@media screen and (min-width: 1400px) {
  @for $i from 1 through 200 {
    .lh-xxl-#{$i} {
      line-height: #{$i}px;
    }
  }
}




// ==============================================
// ↔️ Margin Utilities
// ==============================================
// Usage:
//   mt-{n}   → margin-top: {n}px
//   mb-{n}   → margin-bottom: {n}px
//   ml-{n}   → margin-left: {n}px
//   mr-{n}   → margin-right: {n}px
//
// Responsive Versions:
//   mt-sm-{n}   → Apply on small screens (≤576px)
//   mb-sm-{n}   → Apply on small screens (≤576px)
//   ml-sm-{n}   → Apply on small screens (≤576px)
//   mr-sm-{n}   → Apply on small screens (≤576px)
//
//   mt-md-{n}   → Apply on medium screens (768px–991px)
//   mb-md-{n}   → Apply on medium screens (768px–991px)
//   ml-md-{n}   → Apply on medium screens (768px–991px)
//   mr-md-{n}   → Apply on medium screens (768px–991px)
//
//   mt-lg-{n}   → Apply on large screens (992px–1199px)
//   mb-lg-{n}   → Apply on large screens (992px–1199px)
//   ml-lg-{n}   → Apply on large screens (992px–1199px)
//   mr-lg-{n}   → Apply on large screens (992px–1199px)
//
// Examples:
//   <div class="mt-20 mb-40">Margin top 20px, bottom 40px</div>
//   <div class="ml-sm-10 mr-sm-10">Apply 10px left/right margin on small screens</div>
//   <div class="mt-md-50">Add 50px top margin only on medium screens</div>
//   <div class="mb-lg-80">Add 80px bottom margin only on large screens</div>
// ==============================================


@mixin generate-margin-classes($prefix, $direction, $property) {
  @for $i from 0 through 600 {
    .#{$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
// ==============================================
// Usage:
//   pt-{n}   → padding-top: {n}px
//   pb-{n}   → padding-bottom: {n}px
//   pl-{n}   → padding-left: {n}px
//   pr-{n}   → padding-right: {n}px
//
// Responsive Versions:
//   pt-sm-{n}   → Apply on small screens (≤576px)
//   pb-sm-{n}   → Apply on small screens (≤576px)
//   pl-sm-{n}   → Apply on small screens (≤576px)
//   pr-sm-{n}   → Apply on small screens (≤576px)
//
//   pt-md-{n}   → Apply on medium screens (768px–991px)
//   pb-md-{n}   → Apply on medium screens (768px–991px)
//   pl-md-{n}   → Apply on medium screens (768px–991px)
//   pr-md-{n}   → Apply on medium screens (768px–991px)
//
//   pt-lg-{n}   → Apply on large screens (992px–1199px)
//   pb-lg-{n}   → Apply on large screens (992px–1199px)
//   pl-lg-{n}   → Apply on large screens (992px–1199px)
//   pr-lg-{n}   → Apply on large screens (992px–1199px)
//
// Examples:
//   <div class="pt-20 pb-40">Padding top 20px, bottom 40px</div>
//   <div class="pl-sm-10 pr-sm-10">Apply 10px left/right padding on small screens</div>
//   <div class="pt-md-50">Add 50px top padding only on medium screens</div>
//   <div class="pb-lg-80">Add 80px bottom padding only on large screens</div>
// ==============================================


@mixin generate-padding-classes($prefix, $direction, $property) {
  @for $i from 0 through 600 {
    .#{$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; }
.f-italic{
  font-style: italic;
}



// ==============================================
// 👁 Responsive Visibility Utilities
// ==============================================
// Usage:
//   d-show         → Show always
//   d-hide         → Hide always
//
//   d-sm-show      → Show from sm (≥576px) and up
//   d-sm-hide      → Hide from sm (≥576px) and up
//
//   d-md-show      → Show from md (≥768px) and up
//   d-md-hide      → Hide from md (≥768px) and up
//
//   d-lg-show      → Show from lg (≥992px) and up
//   d-lg-hide      → Hide from lg (≥992px) and up
//
//   d-xl-show      → Show from xl (≥1200px) and up
//   d-xl-hide      → Hide from xl (≥1200px) and up
//
//   d-xxl-show     → Show from xxl (≥1400px) and up
//   d-xxl-hide     → Hide from xxl (≥1400px) and up
//
// Examples:
//   <div class="d-show d-md-hide">Visible only on xs–sm</div>
//   <div class="d-hide d-lg-show">Hidden by default, visible lg and up</div>
//   <div class="d-md-show d-xl-hide">Visible from md up to lg</div>
// ==============================================

$breakpoints: (
        xs: 0px,
        sm: 576px,
        md: 768px,
        lg: 992px,
        xl: 1200px,
        xxl: 1400px
);

// Default global utilities
.d-show { display: block !important; }
.d-hide { display: none !important; }

// Responsive versions (Bootstrap-like)
@each $name, $value in $breakpoints {
  @if $name != xs {
    // Show from this breakpoint and up
    @media (min-width: $value) {
      .d-#{$name}-show { display: block !important; }
      .d-#{$name}-hide { display: none !important; }
    }
  } @else {
    // xs: show/hide by default
    .d-xs-show { display: block !important; }
    .d-xs-hide { display: none !important; }
  }
}




// ==============================================
// 🔀 Responsive <br> Utilities
// ==============================================
// Usage:
//   br-sm-none   → hides <br> on small screens (≤576px)
//   br-md-none   → hides <br> on medium screens (768px–991px)
//   br-lg-none   → hides <br> on large screens (992px–1199px)
//   br-xl-none   → hides <br> on extra large screens (1200px–1366px)
//   br-xxl-none  → hides <br> on extra extra large screens (≥1367px)
// ==============================================

// Small screens
@media screen and (max-width: $screen-xs) {
  .br-sm-none {
    display: none;
  }
}

// Medium screens (768px–991px)
@media screen and (max-width: 991px) and (min-width: 768px) {
  .br-md-none {
    display: none;
  }
}

// Large screens (992px–1199px)
@media screen and (max-width: 1199px) and (min-width: 992px) {
  .br-lg-none {
    display: none;
  }
}

// Extra Large screens (1200px–1366px)
@media screen and (max-width: 1366px) and (min-width: 1200px) {
  .br-xl-none {
    display: none;
  }
}

// XXL screens (≥1367px)
@media screen and (min-width: 1367px) {
  .br-xxl-none {
    display: none;
  }
}