:root {
  /* Common Style Variables */

  /* Color */
  --color-cadetblue: #5cbcc7;
  --color-darkslategray-100: #324653;
  --color-darkslategray-200: #1c2f40;
  --color-deepskyblue: #00aeff;
  --color-gainsboro: #dce3ea;
  --color-gray-100: #111d29;
  --color-gray-200: #0e141b;
  --color-gray-300: rgba(14, 20, 27, 0.05);
  --color-gray-400: rgba(14, 20, 27, 0.1);
  --color-gray-500: rgba(255, 255, 255, 0);
  --color-gray-600: #465F6F;
  --color-lightslategray: #7b9aa6;
  --color-lightsteelblue: #b5c4d6;
  --color-red: #e7000b;
  --color-limegreen: #00c951;
  --color-slategray: #5c7b8d;
  --color-white: #fff;
  --color-whitesmoke-100: #f6f8fa;
  --color-whitesmoke-200: #ecf0f4;  

  /* Gap */
  --gap-4: 4px;
  --gap-6: 6px;
  --gap-7: 7px;
  --gap-8: 8px;
  --gap-10: 10px;
  --gap-12: 12px;
  --gap-16: 16px;
  --gap-20: 20px;

  /* Padding */
  --padding-0: 0px;
  --padding-4: 4px;
  --padding-6: 6px;
  --padding-8: 8px;
  --padding-10: 10px;
  --padding-12: 12px;
  --padding-14: 14px;
  --padding-16: 16px;

  /* BorderRadius */
  --br-4: 4px;
  --br-6: 6px;
  --br-8: 8px;
  --br-16: 16px;

  /* Font */
  --font-barlow: Barlow;
  --font-barlow-condensed: Barlow Condensed;
  --font-font-awesome: Font Awesome 6 Free;
  --font-inter: Inter;

  /* FontSize */
  --fs-12: 12px;
  --fs-14: 14px;
  --fs-16: 16px;
  --fs-20: 20px;
  --fs-32: 32px;

  /* Borders */
  --border-1: 1px solid var(--color-gainsboro);
  --border-2: 2px solid var(--color-gainsboro);

  /* WidthHeights */
  --height-16: 16px;
  --height-18: 18px;
  --height-20: 20px;
  --height-24: 24px;
  --height-26: 26px;
  --height-32: 32px;
  --height-36: 36px;
  --height-40: 40px;
  --width-16: 16px;
  --width-20: 20px;
  --width-24: 24px;
  --width-36: 36px;
  --width-40: 40px;
  --width-43: 43px;
  --width-71: 71px;
  --width-170: 170px;
  --width-180: 180px;

  /* LineHeights */
  --lh-16: 16px;
  --lh-22: 22px;
  --lh-24: 24px;
  --lh-28: 28px;

  /* FontWeights */
  --fw-600: 600;

  /* Opacitiy */
  --op-10: 0.1;

  /* MAPPING */
  /* Both Modes */
  --primary: var(--color-deepskyblue);
  --on-primary: var(--color-white);
  --error: var(--color-red);
  
  
  --text-subtle:var(--color-slategray);

  /* Light Mode */
  [data-bs-theme="light"]{
    --text-headings: var(--color-gray-200);
    --text-body: var(--color-gray-100);
    --text-muted: var(--color-darkslategray-100);
    --text-disabled: var(--color-lightslategray);
    --subtle: var(--surface-on-surface-opacity-10);

    --surface-base: var(--color-whitesmoke-100);
    --surface-on-surface: rgba(14, 20, 27, 1);
    --surface-on-surface-opacity-3: rgba(14, 20, 27, 0.03);
    --surface-on-surface-opacity-10: rgba(14, 20, 27, 0.1);
    --surface-on-surface-opacity-20: rgba(14, 20, 27, 0.2);
    --surface-on-surface-opacity-30: rgba(14, 20, 27, 0.3);

    --outline-base: var(--color-lightslategray);
    --outline-variant: var(--color-gainsboro);

    --body-background: radial-gradient(
        closest-side,
        rgba(62, 160, 172, 0.06) 0%,
        rgba(62, 160, 172, 0) 100%
        ),
        linear-gradient(to left, var(--color-darkslategray-100), var(--color-darkslategray-100));
    --content-background: var(--color-white, #FFF);
  }
  

  /* Dark Mode */
  [data-bs-theme="dark"]{
    --text-headings: var(--color-whitesmoke-100);
    --text-body:var(--color-whitesmoke-200);
    --text-muted:var(--color-lightsteelblue);
    --text-disabled: var(--color-gray-600);
    --subtle: var(--surface-on-surface-opacity-10);

    --surface-base: var(--color-gray-200);
    --surface-on-surface: rgba(245, 247, 250, 1);
    --surface-on-surface-subtle: var(--color-gray-600);
    --surface-on-surface-opacity-3: rgba(245, 247, 250, 0.03);
    --surface-on-surface-opacity-10: rgba(245, 247, 250, 0.1);
    --surface-on-surface-opacity-20: rgba(245, 247, 250, 0.2);
    --surface-on-surface-opacity-30: rgba(245, 247, 250, 0.3);

    --outline-base: var(--color-slategray);
    --outline-variant: var(--color-darkslategray-200);

    --body-background: radial-gradient(
        closest-side,
        rgba(38, 89, 96, 0.06) 0%,
        rgba(38, 89, 96, 0) 100%
        ),
        linear-gradient(to left, #070A0D, #070A0D);
    --content-background: var(--color-gray-200, #0e141b);
  }
}