/*=========== TABLE OF CONTENTS ===========
1. CSS Variables
2. Utility CSS
==========================================*/

/*-------------------------------------
  1. CSS Variables
--------------------------------------*/
:root {
  /*------Color variables------*/
  --black_900: #000000;
  --blue_500: #2196f3;
  --blue_gray_100: #d3d5d7;
  --blue_gray_100_01: #d9d9d9;
  --blue_gray_100_02: #d4d4d4;
  --blue_gray_400_6d: #8e85856d;
  --blue_gray_50: #eef2f6;
  --blue_gray_800: #37295e;
  --blue_gray_900: #2d2f31;
  --deep_orange_50: #f4eaea;
  --deep_purple_a200: #6440fb;
  --gray_100: #fcf3f3;
  --gray_100_01: #fcf5f5;
  --gray_200: #ece8e8;
  --gray_200_01: #f0f0f0;
  --gray_300: #e4dcdc;
  --gray_300_01: #e6e4e1;
  --gray_300_02: #e7e5e2;
  --gray_400: #bcb8b8;
  --gray_400_01: #c6b8b8;
  --gray_400_02: #b7b0b0;
  --gray_500: #9e9696;
  --gray_800_47: #47444447;
  --gray_900: #140342;
  --gray_900_01: #1e1e1e;
  --gray_900_02: #1f1f1f;
  --green_50: #eafbf3;
  --green_50_01: #eafaf2;
  --green_a400: #00ff84;
  --indigo_100: #bfc1f4;
  --indigo_400: #606cde;
  --indigo_900: #231861;
  --purple_800: #610dab;
  --red_50: #fff1f1;
  --teal_500: #04aa6d;
  --white_a700: #ffffff;
  --white_a700_33: #ffffff33;
  --yellow_600: #ffd833;

  /*------Shadow variables------*/
  --shadow-xs: 0 2px 2px 0 #47444447;

  /*------Border radius variables------*/
  --radius-xs: 2px;
  --radius-sm: 3px;
  --radius-md: 4px;
  --radius-lg: 5px;
  --radius-xl: 6px;
  --radius-2xl: 12px;
  --radius-3xl: 14px;
  --radius-4xl: 16px;
  --radius-5xl: 22px;
  --radius-6xl: 24px;
  --radius-7xl: 30px;
  --radius-8xl: 32px;
  --radius-9xl: 46px;

  /*------Spacing variables------*/
  --space-xs: 2px;
  --space-sm: 4px;
  --space-md: 6px;
  --space-lg: 8px;
  --space-xl: 10px;
  --space-2xl: 11px;
  --space-3xl: 12px;
  --space-4xl: 13px;
  --space-5xl: 14px;
  --space-6xl: 16px;
  --space-7xl: 18px;
  --space-8xl: 20px;
  --space-9xl: 22px;
  --space-10xl: 24px;
  --space-11xl: 26px;
  --space-12xl: 28px;
  --space-13xl: 36px;
  --space-14xl: 38px;
  --space-15xl: 54px;
}

/*-------------------------------------
  2. Utility CSS
--------------------------------------*/
.flex-col-center-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.flex-col-center-start {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

/*-------------------------------------
  3. Modern Subject Templates
--------------------------------------*/
.dl-section {
  margin-top: 20px;
}

.dl-grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 16px;
}

@media (min-width: 768px) {
  .dl-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.dl-card {
  background: var(--white_a700);
  border: 1px solid var(--gray_200_01);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}

.dl-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08);
  border-color: var(--blue_gray_100);
}

.dl-card__header {
  padding: 16px 18px;
  font-weight: 600;
  color: var(--gray_900);
  background: linear-gradient(180deg, var(--white_a700), #fafafa);
  border-bottom: 1px solid var(--gray_200_01);
}

.dl-card__body {
  padding: 14px 18px 18px 18px;
}

.dl-card--accent .dl-card__header {
  color: var(--indigo_900);
  background: linear-gradient(135deg, rgba(100,64,251,0.08), rgba(33,150,243,0.08));
  border-bottom-color: rgba(100,64,251,0.18);
}

.dl-list {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.dl-list li {
  position: relative;
  padding-left: 18px;
  margin: 8px 0;
  color: var(--gray_900_02);
}

.dl-list li:before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--deep_purple_a200);
}

.dl-link {
  color: var(--indigo_400);
  text-decoration: none;
  transition: color 150ms ease;
}

.dl-link:hover {
  color: var(--deep_purple_a200);
  text-decoration: underline;
}

.dl-lesson-desc {
  margin: 6px 0 0 0;
  color: var(--gray_900_02);
  opacity: 0.85;
  line-height: 1.5;
  font-size: 0.95rem;
}

/*-------------------------------------
  4. Blue/White Theme (like index)
--------------------------------------*/
.dl-theme {
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(100,64,251,0.06), transparent 60%),
    radial-gradient(800px 400px at 90% 0%, rgba(33,150,243,0.08), transparent 60%),
    #ffffff;
  color: var(--gray_900_02);
}

.dl-theme #head.secondary {
  background:
    linear-gradient(135deg, rgba(33,150,243,0.15), rgba(100,64,251,0.15));
  border-bottom: 1px solid rgba(100,64,251,0.15);
}

.dl-theme .breadcrumb {
  background: rgba(255,255,255,0.8);
  border: 1px solid var(--gray_200_01);
  border-radius: 12px;
}

.dl-theme .page-header .page-title {
  color: var(--indigo_900);
}

.dl-theme .jumbotron {
  background: rgba(255,255,255,0.9);
  border: 1px solid var(--gray_200_01);
  border-radius: 16px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.06);
}