@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Outfit:wght@400;500;600;700;800&family=Manrope:wght@400;500;600;700;800&family=Space+Grotesk:wght@400;500;600;700&display=swap');

/* Fonts */
@font-face {
  font-family: 'Asap';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/asap-v30-latin_latin-ext-regular.woff2') format('woff2');
}

@font-face {
  font-family: 'Asap';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/asap-v30-latin_latin-ext-700.woff2') format('woff2');
}

:root {

  /* Layout */
  --border-radius: 16px;
  --gutter-x: .5rem;
  --gutter-y: 1rem;
  --sidebar-width: 300px;

  /* Typography */
  --default-text-font: 'Inter','Outfit','Manrope','Space Grotesk',sans-serif;
  --default-text-size: 15px;
  --default-line-height: 1.65;

  /* Colors */
  --site-background-color: linear-gradient(95deg, #4cc9ff, #7c3aed);
  --whitespace-color: #00000025;

  --default-background-color: #161b22;
  --default-border-color: rgba(255,255,255,.08);
  --default-text-color: #e6edf3;
  --link-text-color: #4cc9ff;

  /* Glow Colors */
  --glow-blue: #38bdf8;
  --glow-cyan: #22d3ee;
  --glow-violet: #8b5cf6;
  --glow-pink: #ec4899;

  /* Shadows */
  --shadow-color: rgba(0,0,0,.55);
  --shadow-sm: 0 8px 24px rgba(0,0,0,.25);
  --shadow-md: 0 12px 35px rgba(0,0,0,.35);
  --shadow-lg: 0 20px 60px rgba(0,0,0,.45);

  --glow-shadow:
    0 0 10px rgba(56,189,248,.35),
    0 0 25px rgba(34,211,238,.15);

  --glow-shadow-hover:
    0 0 20px rgba(56,189,248,.45),
    0 0 40px rgba(139,92,246,.25);

  /* Glass */
  --glass-bg: rgba(22,27,34,.72);
  --glass-border: rgba(255,255,255,.08);
  --glass-blur: blur(16px);

  /* Header */
  --header-background-color: ;
  --header-text-color: #f8fafc;

  /* Important Notice */
  --important-notice-background-color:
    linear-gradient(135deg,#1e2530,#111827);
  --important-notice-text-color: #fff;

  /* Cookie Notice */
  --cookie-notice-background-color: rgba(22,27,34,.9);
  --cookie-notice-text-color: #fff;

  /* Navigation */
  --navigation-background-color: #00000090;
  --navigation-background-color-hover: rgba(56,189,248,.08);
  --navigation-background-color-active: rgba(56,189,248,.18);

  --navigation-text-color: #dbe4ee;
  --navigation-text-color-hover: #ffffff;
  --navigation-text-color-active: #4cc9ff;

  /* Offcanvas */
  --offcanvas-background-color: rgba(22,27,34,.95);
  --offcanvas-text-color: #fff;

  /* Buttons */
  --default-button-background-color: rgba(30,37,48,.9);
  --default-button-background-color-hover: #243142;
  --default-button-background-color-active: #1f2937;
  --default-button-border-color: rgba(255,255,255,.08);
  --default-button-text-color: #fff;

  --primary-button-background-color:
    linear-gradient(135deg,#38bdf8,#8b5cf6);

  --primary-button-background-color-hover:
    linear-gradient(135deg,#4cc9ff,#9b6bff);

  --primary-button-background-color-active:
    linear-gradient(135deg,#0ea5e9,#7c3aed);

  --primary-button-border-color: rgba(56,189,248,.35);
  --primary-button-text-color: #fff;

  --success-button-background-color:
    linear-gradient(135deg,#10b981,#22c55e);

  --success-button-background-color-hover:
    linear-gradient(135deg,#22c55e,#34d399);

  --success-button-background-color-active:
    linear-gradient(135deg,#059669,#16a34a);

  --success-button-border-color: rgba(16,185,129,.35);
  --success-button-text-color: #fff;

  --warning-button-background-color:
    linear-gradient(135deg,#f59e0b,#fb7185);

  --warning-button-background-color-hover:
    linear-gradient(135deg,#fbbf24,#fb7185);

  --warning-button-background-color-active:
    linear-gradient(135deg,#d97706,#f43f5e);

  --warning-button-border-color: rgba(245,158,11,.35);
  --warning-button-text-color: #fff;

  --danger-button-background-color:
    linear-gradient(135deg,#ef4444,#ec4899);

  --danger-button-background-color-hover:
    linear-gradient(135deg,#f87171,#f472b6);

  --danger-button-background-color-active:
    linear-gradient(135deg,#dc2626,#db2777);

  --danger-button-border-color: rgba(239,68,68,.35);
  --danger-button-text-color: #fff;

  /* Notices */
  --default-notice-background-color: rgba(30,37,48,.8);
  --default-notice-text-color: #fff;
  --default-notice-border-color: rgba(255,255,255,.08);

  --primary-notice-background-color: rgba(56,189,248,.12);
  --primary-notice-text-color: #7dd3fc;
  --primary-notice-border-color: rgba(56,189,248,.35);

  --success-notice-background-color: rgba(34,197,94,.12);
  --success-notice-text-color: #86efac;
  --success-notice-border-color: rgba(34,197,94,.35);

  --warning-notice-background-color: rgba(251,191,36,.12);
  --warning-notice-text-color: #fde68a;
  --warning-notice-border-color: rgba(251,191,36,.35);

  --danger-notice-background-color: rgba(239,68,68,.12);
  --danger-notice-text-color: #fca5a5;
  --danger-notice-border-color: rgba(239,68,68,.35);

  /* Breadcrumbs */
  --breadcrumbs-background-color: rgba(22,27,34,.75);
  --breadcrumbs-text-color: #94a3b8;
  --breadcrumbs-border-color: rgba(255,255,255,.06);

  /* Cards */
  --card-background-color: rgba(22,27,34,.28);
  --card-text-color: #e6edf3;
  --card-border-color: rgba(255,255,255,.08);

  --card-header-background-color: transparent;
  --card-header-text-color: #fff;

  --card-body-background-color: transparent;

  --card-footer-background-color: rgba(30,37,48,.6);

  /* Input */
  --input-background-color: rgba(30,37,48,.8);
  --input-padding-x: 1.5em;
  --input-padding-y: .75em;
  --input-text-color: #fff;
  --input-border-radius: 14px;

  /* Pills */
  --pills-background-color: transparent;

  --pills-background-color-active:
    linear-gradient(135deg,#38bdf8,#8b5cf6);

  --pills-background-color-hover: rgba(56,189,248,.08);

  --pills-text-color: #dbe4ee;
  --pills-text-color-active: #fff;

  /* Tabs */
  --tabs-pane-background-color: rgba(22,27,34,.85);
  --tabs-pane-border-color: rgba(255,255,255,.08);

  --tabs-background-color: rgba(30,37,48,.85);

  --tabs-background-color-active:
    linear-gradient(135deg,#38bdf8,#8b5cf6);

  --tabs-text-color: #cbd5e1;
  --tabs-text-color-active: #fff;

  --tabs-border-color: rgba(255,255,255,.08);
  --tabs-border-color-active: rgba(56,189,248,.4);

  --tabs-content-background-color: rgba(22,27,34,.82);

  /* Dropdown */
  --dropdown-menu-background-color: rgba(22,27,34,.96);

  --dropdown-menu-item-background-color:
    var(--dropdown-menu-background-color);

  --dropdown-menu-item-text-color: #e6edf3;

  /* Tables */
  --table-striped-row-background-odd: rgba(22,27,34,.7);
  --table-striped-row-background-even: rgba(30,37,48,.7);
  --table-row-hover-background: rgba(56,189,248,.08);

  /* Pagination */
  --pagination-background-color: rgba(22,27,34,.8);

  --pagination-background-color-active:
    linear-gradient(135deg,#38bdf8,#8b5cf6);

  --pagination-background-color-hover: rgba(56,189,248,.08);

  --pagination-text-color: #dbe4ee;
  --pagination-text-color-active: #fff;
  --pagination-text-color-hover: #fff;

  --pagination-border-color: rgba(255,255,255,.08);

  /* Footer */
  --footer-background-color: rgba(22,27,34,.95);
  --footer-title-color: #fff;
  --footer-text-color: #cbd5e1;

  /* Copyright */
  --copyright-background-color: #0b0f15;
  --copyright-text-color: #94a3b8;

  /* Motion */
  --transition-speed: 400ms cubic-bezier(.4,0,.2,1);
}

/* Premium Global Effects */

body {
  font-family: var(--default-text-font);
  background:
    radial-gradient(circle at top left, rgba(56,189,248,.08), transparent 30%),
    radial-gradient(circle at top right, rgba(139,92,246,.08), transparent 35%),
    radial-gradient(circle at bottom left, rgba(34,211,238,.08), transparent 35%),
    var(--site-background-color);
  color: var(--default-text-color);
}

.card,
.dropdown-menu,
.modal,
.sidebar,
.navigation,
.tabs-content {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-md);
}

.card:hover,
.dropdown-menu:hover {
  box-shadow: var(--shadow-lg), var(--glow-shadow);
  border-color: rgba(56,189,248,.18);
}

button,
.btn {
  transition: all var(--transition-speed);
  box-shadow: var(--glow-shadow);
}

button:hover,
.btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md), var(--glow-shadow-hover);
}

input,
textarea,
select {
  background: var(--input-background-color);
  border: 1px solid rgba(255,255,255,.08);
  color: var(--input-text-color);
  transition: all var(--transition-speed);
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--glow-blue);
  box-shadow:
    0 0 0 3px rgba(56,189,248,.15),
    0 0 20px rgba(56,189,248,.25);
}

a {
  color: var(--link-text-color);
  transition: color var(--transition-speed);
}

a:hover {
  color: #7dd3fc;
}

.gradient-text {
  background: linear-gradient(
    135deg,
    #38bdf8,
    #22d3ee,
    #8b5cf6
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}