// ============================================================
// TPAKD-RED Color System
// Base Color: #A01915
// Generated for Metronic-style framework compatibility
// ============================================================

// ------------------------------------------------------------
// 1. RAW COLOR SCALE (100–900)
//    Light to dark, like Tailwind / Bootstrap extended palette
// ------------------------------------------------------------
$tpakd-red-100: #fce8e7 !default;
$tpakd-red-200: #f7bfbd !default;
$tpakd-red-300: #ef8583 !default;
$tpakd-red-400: #e04e4b !default;
$tpakd-red-500: #c42b27 !default;  // slightly lighter than base
$tpakd-red-600: #a01915 !default;  // BASE
$tpakd-red-700: #821210 !default;
$tpakd-red-800: #600d0b !default;
$tpakd-red-900: #3d0807 !default;

// ------------------------------------------------------------
// 2. SEMANTIC ALIASES (Metronic-style naming)
// ------------------------------------------------------------
$tpakd-red:              $tpakd-red-600 !default;  // Base / Default
$tpakd-red-active:       $tpakd-red-700 !default;  // Pressed / Active state
$tpakd-red-hover:        $tpakd-red-500 !default;  // Hovered state (slightly lighter for contrast feel)
$tpakd-red-focus:        $tpakd-red-600 !default;  // Focused state (same as base, handled via outline)
$tpakd-red-dark:         $tpakd-red-800 !default;  // Dark variant
$tpakd-red-darker:       $tpakd-red-900 !default;  // Darkest variant
$tpakd-red-light:        $tpakd-red-200 !default;  // Light background tint
$tpakd-red-lighter:      $tpakd-red-100 !default;  // Extra light / subtle background
$tpakd-red-inverse:      #ffffff       !default;  // Text/icon on red background
$tpakd-red-muted:        rgba($tpakd-red-600, 0.65) !default;  // Muted / disabled

// ------------------------------------------------------------
// 3. OPACITY / ALPHA VARIANTS
// ------------------------------------------------------------
$tpakd-red-alpha-10:     rgba($tpakd-red-600, 0.10) !default;
$tpakd-red-alpha-20:     rgba($tpakd-red-600, 0.20) !default;
$tpakd-red-alpha-30:     rgba($tpakd-red-600, 0.30) !default;
$tpakd-red-alpha-40:     rgba($tpakd-red-600, 0.40) !default;
$tpakd-red-alpha-50:     rgba($tpakd-red-600, 0.50) !default;
$tpakd-red-alpha-60:     rgba($tpakd-red-600, 0.60) !default;
$tpakd-red-alpha-75:     rgba($tpakd-red-600, 0.75) !default;
$tpakd-red-alpha-90:     rgba($tpakd-red-600, 0.90) !default;

// ------------------------------------------------------------
// 4. COMPONENT-LEVEL TOKENS
//    Maps semantic meaning to component contexts
// ------------------------------------------------------------

// Button
$btn-tpakd-red-bg:             $tpakd-red          !default;
$btn-tpakd-red-color:          $tpakd-red-inverse  !default;
$btn-tpakd-red-border:         $tpakd-red          !default;
$btn-tpakd-red-hover-bg:       $tpakd-red-hover    !default;
$btn-tpakd-red-hover-color:    $tpakd-red-inverse  !default;
$btn-tpakd-red-hover-border:   $tpakd-red-hover    !default;
$btn-tpakd-red-active-bg:      $tpakd-red-active   !default;
$btn-tpakd-red-active-color:   $tpakd-red-inverse  !default;
$btn-tpakd-red-active-border:  $tpakd-red-active   !default;
$btn-tpakd-red-focus-shadow:   rgba($tpakd-red-600, 0.35) !default;
$btn-tpakd-red-disabled-bg:    rgba($tpakd-red-600, 0.55) !default;
$btn-tpakd-red-disabled-color: $tpakd-red-inverse  !default;

// Light Button variant (outlined/ghost feel)
$btn-tpakd-red-light-bg:           $tpakd-red-lighter  !default;
$btn-tpakd-red-light-color:        $tpakd-red          !default;
$btn-tpakd-red-light-hover-bg:     $tpakd-red          !default;
$btn-tpakd-red-light-hover-color:  $tpakd-red-inverse  !default;
$btn-tpakd-red-light-active-bg:    $tpakd-red-active   !default;
$btn-tpakd-red-light-active-color: $tpakd-red-inverse  !default;

// Badge / Label
$badge-tpakd-red-bg:    $tpakd-red         !default;
$badge-tpakd-red-color: $tpakd-red-inverse !default;

$badge-tpakd-red-light-bg:    $tpakd-red-lighter !default;
$badge-tpakd-red-light-color: $tpakd-red         !default;

// Alert
$alert-tpakd-red-bg:     $tpakd-red-lighter  !default;
$alert-tpakd-red-color:  $tpakd-red-dark     !default;
$alert-tpakd-red-border: $tpakd-red-light    !default;

// Card / Panel
$card-tpakd-red-bg:     $tpakd-red          !default;
$card-tpakd-red-color:  $tpakd-red-inverse  !default;

$card-tpakd-red-light-bg:    $tpakd-red-lighter !default;
$card-tpakd-red-light-color: $tpakd-red-dark    !default;

// Form / Input
$input-tpakd-red-border:         $tpakd-red          !default;
$input-tpakd-red-focus-border:   $tpakd-red-hover    !default;
$input-tpakd-red-focus-shadow:   rgba($tpakd-red-600, 0.25) !default;

// Link
$link-tpakd-red-color:       $tpakd-red        !default;
$link-tpakd-red-hover-color: $tpakd-red-active !default;

// Text utilities
$text-tpakd-red:        $tpakd-red        !default;
$text-tpakd-red-muted:  $tpakd-red-muted  !default;

// Border
$border-tpakd-red:       $tpakd-red-light   !default;
$border-tpakd-red-dark:  $tpakd-red         !default;

// Separator / Divider
$separator-tpakd-red: $tpakd-red-light !default;

// Icon
$icon-tpakd-red-color: $tpakd-red !default;

// Scrollbar
$scrollbar-tpakd-red-color: $tpakd-red-light !default;

// Shadow
$shadow-tpakd-red-sm:   0 2px  6px rgba($tpakd-red-600, 0.25)  !default;
$shadow-tpakd-red:      0 4px 12px rgba($tpakd-red-600, 0.30)  !default;
$shadow-tpakd-red-lg:   0 8px 24px rgba($tpakd-red-600, 0.35)  !default;

// ------------------------------------------------------------
// 5. CSS CUSTOM PROPERTIES MAP
//    Emit at :root or a specific scope
// ------------------------------------------------------------
@mixin tpakd-red-css-vars($prefix: "tpakd-red") {
  --#{$prefix}-100:        #{$tpakd-red-100};
  --#{$prefix}-200:        #{$tpakd-red-200};
  --#{$prefix}-300:        #{$tpakd-red-300};
  --#{$prefix}-400:        #{$tpakd-red-400};
  --#{$prefix}-500:        #{$tpakd-red-500};
  --#{$prefix}-600:        #{$tpakd-red-600};
  --#{$prefix}-700:        #{$tpakd-red-700};
  --#{$prefix}-800:        #{$tpakd-red-800};
  --#{$prefix}-900:        #{$tpakd-red-900};

  --#{$prefix}:            #{$tpakd-red};
  --#{$prefix}-active:     #{$tpakd-red-active};
  --#{$prefix}-hover:      #{$tpakd-red-hover};
  --#{$prefix}-dark:       #{$tpakd-red-dark};
  --#{$prefix}-darker:     #{$tpakd-red-darker};
  --#{$prefix}-light:      #{$tpakd-red-light};
  --#{$prefix}-lighter:    #{$tpakd-red-lighter};
  --#{$prefix}-inverse:    #{$tpakd-red-inverse};
  --#{$prefix}-muted:      #{$tpakd-red-muted};

  --#{$prefix}-alpha-10:   #{$tpakd-red-alpha-10};
  --#{$prefix}-alpha-20:   #{$tpakd-red-alpha-20};
  --#{$prefix}-alpha-30:   #{$tpakd-red-alpha-30};
  --#{$prefix}-alpha-50:   #{$tpakd-red-alpha-50};
  --#{$prefix}-alpha-75:   #{$tpakd-red-alpha-75};

  --#{$prefix}-shadow-sm:  #{$shadow-tpakd-red-sm};
  --#{$prefix}-shadow:     #{$shadow-tpakd-red};
  --#{$prefix}-shadow-lg:  #{$shadow-tpakd-red-lg};
}

:root {
  @include tpakd-red-css-vars();
}

// ------------------------------------------------------------
// 6. UTILITY CLASSES
//    Background, text, border — standard + state variants
// ------------------------------------------------------------

// Background
.bg-tpakd-red         { background-color: $tpakd-red !important; }
.bg-tpakd-red-100     { background-color: $tpakd-red-100 !important; }
.bg-tpakd-red-200     { background-color: $tpakd-red-200 !important; }
.bg-tpakd-red-300     { background-color: $tpakd-red-300 !important; }
.bg-tpakd-red-400     { background-color: $tpakd-red-400 !important; }
.bg-tpakd-red-500     { background-color: $tpakd-red-500 !important; }
.bg-tpakd-red-600     { background-color: $tpakd-red-600 !important; }
.bg-tpakd-red-700     { background-color: $tpakd-red-700 !important; }
.bg-tpakd-red-800     { background-color: $tpakd-red-800 !important; }
.bg-tpakd-red-900     { background-color: $tpakd-red-900 !important; }
.bg-tpakd-red-light   { background-color: $tpakd-red-light !important; }
.bg-tpakd-red-lighter { background-color: $tpakd-red-lighter !important; }
.bg-tpakd-red-active  { background-color: $tpakd-red-active !important; }
.bg-tpakd-red-dark    { background-color: $tpakd-red-dark !important; }
.bg-tpakd-red-alpha-10 { background-color: $tpakd-red-alpha-10 !important; }
.bg-tpakd-red-alpha-20 { background-color: $tpakd-red-alpha-20 !important; }
.bg-tpakd-red-alpha-30 { background-color: $tpakd-red-alpha-30 !important; }
.bg-tpakd-red-alpha-50 { background-color: $tpakd-red-alpha-50 !important; }

// Text
.text-tpakd-red         { color: $tpakd-red !important; }
.text-tpakd-red-100     { color: $tpakd-red-100 !important; }
.text-tpakd-red-200     { color: $tpakd-red-200 !important; }
.text-tpakd-red-300     { color: $tpakd-red-300 !important; }
.text-tpakd-red-400     { color: $tpakd-red-400 !important; }
.text-tpakd-red-500     { color: $tpakd-red-500 !important; }
.text-tpakd-red-600     { color: $tpakd-red-600 !important; }
.text-tpakd-red-700     { color: $tpakd-red-700 !important; }
.text-tpakd-red-800     { color: $tpakd-red-800 !important; }
.text-tpakd-red-900     { color: $tpakd-red-900 !important; }
.text-tpakd-red-light   { color: $tpakd-red-light !important; }
.text-tpakd-red-muted   { color: $tpakd-red-muted !important; }
.text-tpakd-red-inverse { color: $tpakd-red-inverse !important; }

// Border
.border-tpakd-red         { border-color: $tpakd-red !important; }
.border-tpakd-red-light   { border-color: $tpakd-red-light !important; }
.border-tpakd-red-lighter { border-color: $tpakd-red-lighter !important; }
.border-tpakd-red-dark    { border-color: $tpakd-red-dark !important; }

// Hover state utilities
.bg-tpakd-red-hover:hover   { background-color: $tpakd-red-hover !important; }
.text-tpakd-red-hover:hover { color: $tpakd-red-hover !important; }

// ------------------------------------------------------------
// 7. BUTTON COMPONENT
// ------------------------------------------------------------
.btn-tpakd-red {
  color:            $btn-tpakd-red-color;
  background-color: $btn-tpakd-red-bg;
  border-color:     $btn-tpakd-red-border;
  box-shadow:       $shadow-tpakd-red-sm;

  &:hover,
  &.hover {
    color:            $btn-tpakd-red-hover-color;
    background-color: $btn-tpakd-red-hover-bg;
    border-color:     $btn-tpakd-red-hover-border;
    box-shadow:       $shadow-tpakd-red;
  }

  &:focus,
  &.focus {
    color:      $btn-tpakd-red-hover-color;
    background-color: $btn-tpakd-red-hover-bg;
    border-color:     $btn-tpakd-red-hover-border;
    box-shadow: 0 0 0 0.25rem $btn-tpakd-red-focus-shadow;
    outline: none;
  }

  &:active,
  &.active,
  .show > &.dropdown-toggle {
    color:            $btn-tpakd-red-active-color;
    background-color: $btn-tpakd-red-active-bg;
    border-color:     $btn-tpakd-red-active-border;
    box-shadow: none;
  }

  &:disabled,
  &.disabled {
    color:            $btn-tpakd-red-disabled-color;
    background-color: $btn-tpakd-red-disabled-bg;
    border-color:     $btn-tpakd-red-disabled-bg;
    box-shadow: none;
    cursor: not-allowed;
    pointer-events: all;
  }
}

// Light / ghost variant
.btn-light-tpakd-red {
  color:            $btn-tpakd-red-light-color;
  background-color: $btn-tpakd-red-light-bg;
  border-color:     transparent;

  &:hover,
  &.hover {
    color:            $btn-tpakd-red-light-hover-color;
    background-color: $btn-tpakd-red-light-hover-bg;
    border-color:     transparent;
  }

  &:focus,
  &.focus {
    color:            $btn-tpakd-red-light-hover-color;
    background-color: $btn-tpakd-red-light-hover-bg;
    box-shadow: 0 0 0 0.25rem $btn-tpakd-red-focus-shadow;
    outline: none;
  }

  &:active,
  &.active,
  .show > &.dropdown-toggle {
    color:            $btn-tpakd-red-light-active-color;
    background-color: $btn-tpakd-red-light-active-bg;
    border-color:     transparent;
  }

  &:disabled,
  &.disabled {
    color:            $btn-tpakd-red-light-color;
    background-color: $btn-tpakd-red-light-bg;
    cursor: not-allowed;
    pointer-events: all;
    opacity: 0.6;
  }
}

// Outline variant
.btn-outline-tpakd-red {
  color:            $tpakd-red;
  background-color: transparent;
  border-color:     $tpakd-red;

  &:hover,
  &.hover {
    color:            $tpakd-red-inverse;
    background-color: $tpakd-red;
    border-color:     $tpakd-red;
  }

  &:focus,
  &.focus {
    box-shadow: 0 0 0 0.25rem $btn-tpakd-red-focus-shadow;
    outline: none;
  }

  &:active,
  &.active {
    color:            $tpakd-red-inverse;
    background-color: $tpakd-red-active;
    border-color:     $tpakd-red-active;
  }

  &:disabled,
  &.disabled {
    color:            $tpakd-red;
    background-color: transparent;
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: all;
  }
}

// ------------------------------------------------------------
// 8. BADGE COMPONENT
// ------------------------------------------------------------
.badge-tpakd-red {
  color:            $badge-tpakd-red-color;
  background-color: $badge-tpakd-red-bg;
}

.badge-light-tpakd-red {
  color:            $badge-tpakd-red-light-color;
  background-color: $badge-tpakd-red-light-bg;
}

// ------------------------------------------------------------
// 9. ALERT COMPONENT
// ------------------------------------------------------------
.alert-tpakd-red {
  color:            $alert-tpakd-red-color;
  background-color: $alert-tpakd-red-bg;
  border-color:     $alert-tpakd-red-border;

  .alert-link {
    color: $tpakd-red-dark;
  }

  .alert-icon {
    color: $tpakd-red;
  }
}

// ------------------------------------------------------------
// 10. CARD / PANEL COMPONENT
// ------------------------------------------------------------
.card-tpakd-red {
  background-color: $card-tpakd-red-bg;
  color:            $card-tpakd-red-color;
  border-color:     $tpakd-red-active;

  .card-header,
  .card-footer {
    background-color: $tpakd-red-active;
    border-color:     rgba(255, 255, 255, 0.15);
    color:            $tpakd-red-inverse;
  }
}

.card-light-tpakd-red {
  background-color: $card-tpakd-red-light-bg;
  color:            $card-tpakd-red-light-color;
  border-color:     $tpakd-red-light;

  .card-header,
  .card-footer {
    background-color: $tpakd-red-lighter;
    border-color:     $tpakd-red-light;
    color:            $tpakd-red;
  }
}

// ------------------------------------------------------------
// 11. FORM / INPUT COMPONENT
// ------------------------------------------------------------
.form-control-tpakd-red {
  border-color: $input-tpakd-red-border;

  &:focus {
    border-color: $input-tpakd-red-focus-border;
    box-shadow: 0 0 0 0.25rem $input-tpakd-red-focus-shadow;
    outline: none;
  }
}

.form-check-input-tpakd-red {
  &:checked {
    background-color: $tpakd-red;
    border-color:     $tpakd-red;
  }

  &:focus {
    box-shadow: 0 0 0 0.25rem $input-tpakd-red-focus-shadow;
  }
}

// ------------------------------------------------------------
// 12. LINK
// ------------------------------------------------------------
.link-tpakd-red {
  color: $link-tpakd-red-color;
  text-decoration-color: $tpakd-red-alpha-50;

  &:hover,
  &:focus {
    color: $link-tpakd-red-hover-color;
    text-decoration-color: $tpakd-red-hover;
  }
}

// ------------------------------------------------------------
// 13. SEPARATOR / DIVIDER
// ------------------------------------------------------------
.separator-tpakd-red {
  border-top-color: $separator-tpakd-red;
}

// ------------------------------------------------------------
// 14. SHADOW UTILITIES
// ------------------------------------------------------------
.shadow-tpakd-red-sm { box-shadow: $shadow-tpakd-red-sm !important; }
.shadow-tpakd-red    { box-shadow: $shadow-tpakd-red    !important; }
.shadow-tpakd-red-lg { box-shadow: $shadow-tpakd-red-lg !important; }

// ------------------------------------------------------------
// 15. METRONIC-STYLE THEME MAP INTEGRATION
//    Drop-in compatible with Metronic's $theme-colors map
// ------------------------------------------------------------
$tpakd-red-theme: (
  "base":     $tpakd-red,
  "active":   $tpakd-red-active,
  "hover":    $tpakd-red-hover,
  "light":    $tpakd-red-light,
  "lighter":  $tpakd-red-lighter,
  "dark":     $tpakd-red-dark,
  "darker":   $tpakd-red-darker,
  "inverse":  $tpakd-red-inverse,
  "muted":    $tpakd-red-muted,
  "100":      $tpakd-red-100,
  "200":      $tpakd-red-200,
  "300":      $tpakd-red-300,
  "400":      $tpakd-red-400,
  "500":      $tpakd-red-500,
  "600":      $tpakd-red-600,
  "700":      $tpakd-red-700,
  "800":      $tpakd-red-800,
  "900":      $tpakd-red-900,
) !default;

// Helper function: get-tpakd-red(key)
@function get-tpakd-red($key: "base") {
  @return map-get($tpakd-red-theme, $key);
}

// ------------------------------------------------------------
// 16. MIXIN — Apply tpakd-red theming to any custom component
// ------------------------------------------------------------
//
// Usage:
//   .my-component { @include tpakd-red-theme(); }
//
@mixin tpakd-red-theme($include-states: true) {
  color:            $tpakd-red-inverse;
  background-color: $tpakd-red;
  border-color:     $tpakd-red;

  @if $include-states {
    &:hover,
    &.hover {
      background-color: $tpakd-red-hover;
      border-color:     $tpakd-red-hover;
    }

    &:focus,
    &.focus {
      background-color: $tpakd-red-hover;
      border-color:     $tpakd-red-hover;
      box-shadow: 0 0 0 0.25rem $tpakd-red-alpha-30;
    }

    &:active,
    &.active {
      background-color: $tpakd-red-active;
      border-color:     $tpakd-red-active;
    }

    &:disabled,
    &.disabled {
      opacity: 0.6;
      cursor: not-allowed;
    }
  }
}

// Light version mixin
@mixin tpakd-red-light-theme($include-states: true) {
  color:            $tpakd-red;
  background-color: $tpakd-red-lighter;
  border-color:     transparent;

  @if $include-states {
    &:hover,
    &.hover {
      color:            $tpakd-red-inverse;
      background-color: $tpakd-red;
    }

    &:active,
    &.active {
      color:            $tpakd-red-inverse;
      background-color: $tpakd-red-active;
    }
  }
}