/* ================================
   Theme Variables
   ================================ */
:root {
  --tk-primary-900: #0F172A;
  --tk-primary-700: #1E293B;
  --tk-primary-500: #3B82F6;
  --tk-primary-300: #93C5FD;
  --tk-primary-100: #DBEAFE;
  
  --tk-success-900: #14532D;
  --tk-success-700: #15803D;
  --tk-success-500: #22C55E;
  --tk-success-300: #86EFAC;
  --tk-success-100: #DCFCE7;
  
  --tk-token-900: #78350F;
  --tk-token-700: #B45309;
  --tk-token-500: #F59E0B;
  --tk-token-300: #FCD34D;
  --tk-token-100: #FEF3C7;
  
  --tk-review-900: #4C1D95;
  --tk-review-700: #6D28D9;
  --tk-review-500: #8B5CF6;
  --tk-review-300: #C4B5FD;
  --tk-review-100: #EDE9FE;
  
  --tk-danger-900: #7F1D1D;
  --tk-danger-700: #B91C1C;
  --tk-danger-500: #EF4444;
  --tk-danger-300: #FCA5A5;
  --tk-danger-100: #FEE2E2;
  
  --tk-neutral-900: #0F172A;
  --tk-neutral-700: #334155;
  --tk-neutral-500: #64748B;
  --tk-neutral-300: #CBD5E1;
  --tk-neutral-200: #E2E8F0;
  --tk-neutral-100: #F1F5F9;
  --tk-neutral-50: #F8FAFC;

  --tk-border-default: var(--tk-neutral-200);
  --tk-border-light: var(--tk-neutral-100);
  --tk-border-dark: var(--tk-neutral-300);

  --tk-bg-page: var(--tk-neutral-50);
  --tk-bg-card: #FFFFFF;

  --tk-text-primary: var(--tk-neutral-900);
  --tk-text-secondary: var(--tk-neutral-700);
  --tk-text-muted: var(--tk-neutral-500);
  --tk-text-inverse: #FFFFFF;
}

/* ================================
   Global Page Styles
   ================================ */
body {
  background-color: var(--tk-bg-page);
  color: var(--tk-text-primary);
}

.card {
  background-color: var(--tk-bg-card);
  border: 1px solid var(--tk-border-default);
  border-radius: 0.5rem;
}

/* ================================
   Buttons - Solid Variants
   ================================ */
.btn-primary {
  background-color: var(--tk-primary-500);
  border-color: var(--tk-primary-500);
  color: var(--tk-text-inverse);
}
.btn-primary:hover {
  background-color: var(--tk-primary-700);
  border-color: var(--tk-primary-700);
}

.btn-success {
  background-color: var(--tk-success-500);
  border-color: var(--tk-success-500);
  color: var(--tk-text-inverse);
}
.btn-success:hover {
  background-color: var(--tk-success-700);
  border-color: var(--tk-success-700);
}

.btn-warning {
  background-color: var(--tk-token-500);
  border-color: var(--tk-token-500);
  color: var(--tk-text-inverse);
}
.btn-warning:hover {
  background-color: var(--tk-token-700);
  border-color: var(--tk-token-700);
}

.btn-info {
  background-color: var(--tk-review-500);
  border-color: var(--tk-review-500);
  color: var(--tk-text-inverse);
}
.btn-info:hover {
  background-color: var(--tk-review-700);
  border-color: var(--tk-review-700);
}

.btn-danger {
  background-color: var(--tk-danger-500);
  border-color: var(--tk-danger-500);
  color: var(--tk-text-inverse);
}
.btn-danger:hover {
  background-color: var(--tk-danger-700);
  border-color: var(--tk-danger-700);
}

/* ================================
   Buttons - Outline Variants
   ================================ */
.btn-outline-primary {
  background-color: transparent;
  border-color: var(--tk-primary-500);
  color: var(--tk-primary-500);
}
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
  background-color: var(--tk-primary-500);
  border-color: var(--tk-primary-500);
  color: var(--tk-text-inverse);
}
.btn-outline-primary:focus {
  box-shadow: 0 0 0 0.2rem rgba(59, 130, 246, 0.25);
}

.btn-outline-success {
  background-color: transparent;
  border-color: var(--tk-success-500);
  color: var(--tk-success-500);
}
.btn-outline-success:hover,
.btn-outline-success:focus,
.btn-outline-success:active {
  background-color: var(--tk-success-500);
  border-color: var(--tk-success-500);
  color: var(--tk-text-inverse);
}
.btn-outline-success:focus {
  box-shadow: 0 0 0 0.2rem rgba(34, 197, 94, 0.25);
}

.btn-outline-warning {
  background-color: transparent;
  border-color: var(--tk-token-500);
  color: var(--tk-token-500);
}
.btn-outline-warning:hover,
.btn-outline-warning:focus,
.btn-outline-warning:active {
  background-color: var(--tk-token-500);
  border-color: var(--tk-token-500);
  color: var(--tk-text-inverse);
}
.btn-outline-warning:focus {
  box-shadow: 0 0 0 0.2rem rgba(245, 158, 11, 0.25);
}

.btn-outline-info {
  background-color: transparent;
  border-color: var(--tk-review-500);
  color: var(--tk-review-500);
}
.btn-outline-info:hover,
.btn-outline-info:focus,
.btn-outline-info:active {
  background-color: var(--tk-review-500);
  border-color: var(--tk-review-500);
  color: var(--tk-text-inverse);
}
.btn-outline-info:focus {
  box-shadow: 0 0 0 0.2rem rgba(139, 92, 246, 0.25);
}

.btn-outline-danger {
  background-color: transparent;
  border-color: var(--tk-danger-500);
  color: var(--tk-danger-500);
}
.btn-outline-danger:hover,
.btn-outline-danger:focus,
.btn-outline-danger:active {
  background-color: var(--tk-danger-500);
  border-color: var(--tk-danger-500);
  color: var(--tk-text-inverse);
}
.btn-outline-danger:focus {
  box-shadow: 0 0 0 0.2rem rgba(239, 68, 68, 0.25);
}

/* ================================
   Buttons - Light & Dark Variants
   ================================ */
.btn-light {
  background-color: var(--tk-neutral-100);
  border-color: var(--tk-neutral-100);
  color: var(--tk-text-primary);
}
.btn-light:hover {
  background-color: var(--tk-border-default);
  border-color: var(--tk-border-default);
}

.btn-outline-light {
  background-color: transparent;
  border-color: var(--tk-neutral-100);
  color: var(--tk-text-muted);
}
.btn-outline-light:hover,
.btn-outline-light:focus,
.btn-outline-light:active {
  background-color: var(--tk-neutral-100);
  border-color: var(--tk-neutral-100);
  color: var(--tk-text-primary);
}

.btn-dark {
  background-color: var(--tk-primary-900);
  border-color: var(--tk-primary-900);
  color: var(--tk-text-inverse);
}
.btn-dark:hover {
  background-color: #0a0a1a;
  border-color: #0a0a1a;
}

.btn-outline-dark {
  background-color: transparent;
  border-color: var(--tk-primary-900);
  color: var(--tk-primary-900);
}
.btn-outline-dark:hover,
.btn-outline-dark:focus,
.btn-outline-dark:active {
  background-color: var(--tk-primary-900);
  border-color: var(--tk-primary-900);
  color: var(--tk-text-inverse);
}
.btn-outline-dark:focus {
  box-shadow: 0 0 0 0.2rem rgba(15, 23, 42, 0.25);
}

/* ================================
   Button States
   ================================ */
.btn:disabled,
.btn.disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

.btn:focus {
  outline: 0;
}

/* ================================
   Border Utilities
   ================================ */
/* Border colors */
.border-primary {
  border-color: var(--tk-primary-500) !important;
}

.border-success {
  border-color: var(--tk-success-500) !important;
}

.border-warning {
  border-color: var(--tk-token-500) !important;
}

.border-info {
  border-color: var(--tk-review-500) !important;
}

.border-danger {
  border-color: var(--tk-danger-500) !important;
}

.border-light {
  border-color: var(--tk-border-light) !important;
}

.border-dark {
  border-color: var(--tk-neutral-900) !important;
}

.border-muted {
  border-color: var(--tk-neutral-300) !important;
}

/* Border widths */
.border-1 {
  border-width: 1px !important;
}

.border-2 {
  border-width: 2px !important;
}

.border-3 {
  border-width: 3px !important;
}

.border-4 {
  border-width: 4px !important;
}

.border-5 {
  border-width: 5px !important;
}

/* Border radius utilities */
.rounded-sm {
  border-radius: 0.25rem !important;
}

.rounded-md {
  border-radius: 0.375rem !important;
}

.rounded-lg {
  border-radius: 0.5rem !important;
}

.rounded-xl {
  border-radius: 0.75rem !important;
}

.rounded-2xl {
  border-radius: 1rem !important;
}

.rounded-full {
  border-radius: 9999px !important;
}

/* Border style utilities */
.border-dashed {
  border-style: dashed !important;
}

.border-dotted {
  border-style: dotted !important;
}

.border-double {
  border-style: double !important;
}

.border-none {
  border-style: none !important;
}

/* Top, right, bottom, left borders */
.border-top {
  border-top: 1px solid var(--tk-border-default) !important;
}

.border-right {
  border-right: 1px solid var(--tk-border-default) !important;
}

.border-bottom {
  border-bottom: 1px solid var(--tk-border-default) !important;
}

.border-left {
  border-left: 1px solid var(--tk-border-default) !important;
}

/* Colored specific side borders */
.border-top-primary {
  border-top-color: var(--tk-primary-500) !important;
}

.border-right-success {
  border-right-color: var(--tk-success-500) !important;
}

.border-bottom-warning {
  border-bottom-color: var(--tk-token-500) !important;
}

.border-left-info {
  border-left-color: var(--tk-review-500) !important;
}

.border-top-danger {
  border-top-color: var(--tk-danger-500) !important;
}

/* ================================
   Background Utilities
   ================================ */
.bg-primary { background-color: var(--tk-primary-500) !important; }
.bg-success { background-color: var(--tk-success-500) !important; }
.bg-warning { background-color: var(--tk-token-500) !important; }
.bg-info    { background-color: var(--tk-review-500) !important; }
.bg-danger  { background-color: var(--tk-danger-500) !important; }
.bg-light   { background-color: var(--tk-neutral-100) !important; }
.bg-dark    { background-color: var(--tk-primary-900) !important; }

/* Background shades */
.bg-primary-light { background-color: var(--tk-primary-100) !important; }
.bg-success-light { background-color: var(--tk-success-100) !important; }
.bg-warning-light { background-color: var(--tk-token-100) !important; }
.bg-info-light    { background-color: var(--tk-review-100) !important; }
.bg-danger-light  { background-color: var(--tk-danger-100) !important; }

.bg-primary-dark { background-color: var(--tk-primary-700) !important; }
.bg-success-dark { background-color: var(--tk-success-700) !important; }
.bg-warning-dark { background-color: var(--tk-token-700) !important; }
.bg-info-dark    { background-color: var(--tk-review-700) !important; }
.bg-danger-dark  { background-color: var(--tk-danger-700) !important; }

/* ================================
   Text Utilities
   ================================ */
.text-primary { color: var(--tk-primary-500) !important; }
.text-success { color: var(--tk-success-500) !important; }
.text-warning { color: var(--tk-token-500) !important; }
.text-info    { color: var(--tk-review-500) !important; }
.text-danger  { color: var(--tk-danger-500) !important; }
.text-muted   { color: var(--tk-text-muted) !important; }
.text-light   { color: var(--tk-neutral-100) !important; }
.text-dark    { color: var(--tk-neutral-900) !important; }

/* Text shades */
.text-primary-light { color: var(--tk-primary-300) !important; }
.text-success-light { color: var(--tk-success-300) !important; }
.text-warning-light { color: var(--tk-token-300) !important; }
.text-info-light    { color: var(--tk-review-300) !important; }
.text-danger-light  { color: var(--tk-danger-300) !important; }

.text-primary-dark { color: var(--tk-primary-700) !important; }
.text-success-dark { color: var(--tk-success-700) !important; }
.text-warning-dark { color: var(--tk-token-700) !important; }
.text-info-dark    { color: var(--tk-review-700) !important; }
.text-danger-dark  { color: var(--tk-danger-700) !important; }

/* ================================
   Alerts
   ================================ */
  .alert{
    border: 0;
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
    max-width: 400px;
    width: 100%;
    font-size: 15px;
    transition: opacity 0.5s ease; /* smooth fade */
  }
  .alert.fade-out { opacity: 0; }
  .alert ul{
    padding: 5px;
    list-style: none;
    margin: 0;
  }
  .alert i{
    position: absolute;
    right: 8px;
    top: 8px;
    cursor: pointer;
  }
.alert-primary {
  background-color: var(--tk-primary-100);
  border-color: var(--tk-primary-500);
  color: var(--tk-primary-700);
}

.alert-success {
  background-color: var(--tk-success-100);
  border-color: var(--tk-success-500);
  color: var(--tk-success-700);
}

.alert-warning {
  background-color: var(--tk-token-100);
  border-color: var(--tk-token-500);
  color: var(--tk-token-700);
}

.alert-info {
  background-color: var(--tk-review-100);
  border-color: var(--tk-review-500);
  color: var(--tk-review-700);
}

.alert-danger {
  background-color: var(--tk-danger-100);
  border-color: var(--tk-danger-500);
  color: var(--tk-danger-700);
}

/* ================================
   Forms
   ================================ */
.form-control {
  border: 1px solid var(--tk-border-default);
  background-color: var(--tk-bg-card);
  color: var(--tk-text-primary);
  border-radius: 0.375rem;
}

.form-control:focus {
  border-color: var(--tk-primary-500);
  box-shadow: 0 0 0 0.2rem rgba(59, 130, 246, 0.25);
}

/* Form validation colors */
.form-control.is-valid {
  border-color: var(--tk-success-500);
}

.form-control.is-invalid {
  border-color: var(--tk-danger-500);
}

/* ================================
   Table Borders
   ================================ */
.table {
  border-color: var(--tk-border-default);
}

.table th,
.table td {
  border-color: var(--tk-border-default);
}

.table thead th {
  border-bottom: 2px solid var(--tk-border-default);
}

/* ================================
   Divider/Border Utilities
   ================================ */
.divider {
  height: 1px;
  background-color: var(--tk-border-default);
  border: none;
  margin: 1rem 0;
}

.divider-primary {
  background-color: var(--tk-primary-500);
}

.divider-success {
  background-color: var(--tk-success-500);
}

.divider-warning {
  background-color: var(--tk-token-500);
}

.divider-info {
  background-color: var(--tk-review-500);
}

.divider-danger {
  background-color: var(--tk-danger-500);
}


/* ================================
   Typography Overrides
   ================================ */

/* Body text uses Poppins */
body {
  font-family: 'Poppins', sans-serif;
}

/* Headings use Montserrat */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700; /* adjust weight as needed */
}

/* Bootstrap heading utility classes */
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
}