/*
 * ============================================
 *  admin.BisConnect Website - Design System Variables
 *  Version: 1.0.0
 * ============================================
 */

/* ──────────────────────────────────────────────
   Light Mode (Default)
   ────────────────────────────────────────────── */
:root {
  /* ── Primary ── */
  --Primary: #1877F2;
  --PrimaryText: #FFFFFF;
  --PrimaryHover: #318BFF;
  --PrimaryDisabled: #80A9DD;

  /* ── Disabled ── */
  --Disabled: #D4D4D4;
  --DisabledText: #949494;

  /* ── Background ── */
  --Background: #F0F2F5;

  /* ── Text ── */
  --Text: #050505;
  --TextTwo: #6D6F73;

  /* ── Navigation & Layout ── */
  --Nav: #FFFFFF;
  --Section: #FFFFFF;
  --Frame: #F7F8FA;

  /* ── Icon ── */
  --Icon: #293040;
  --IconBackground: #E4E6EB;
  --IconBackgroundHover: #D8DADF;

  /* ── Button ── */
  --Botton: #1877F2;
  --BottonText: #1877F2;
  --BottonHover: #005ED8;
  --BottonTextHover: #005ED8;

  /* ── Notification ── */
  --Notefication: #E91F63;

  /* ── Footer ── */
  --FooterText: #F5F5F5;

  /* ── Status ── */
  --Error: #F04248;
  --Success: #00DF80;
  --Alert: #FFD21E;

  /* ── Border ── */
  --Border: #E7E7E7;
  --BorderHover: #65B946;

  /* ── Radio ── */
  --Radio: #6D6F73;
  --RadioOn: #1877F2;
  --RadioDisabled: #D4D4D6;
  --RadioBack: #D4D4D6;

  /* ── Opacity ── */
  --Opacity20: rgba(255, 255, 255, 0.20);
  --OpacityBorder: rgba(0, 0, 0, 0.10);

  /* ── Selection ── */
  --Select: #0081F1;

  /* ── Social Media ── */
  --facebook: #0866FF;
}

/* ──────────────────────────────────────────────
   Dark Mode
   ────────────────────────────────────────────── */
[data-theme="dark"] {
  /* ── Primary ── */
  --Primary: #1877F2;
  --PrimaryText: #FFFFFF;
  --PrimaryHover: #318BFF;
  --PrimaryDisabled: #80A9DD;

  /* ── Disabled ── */
  --Disabled: #2F3031;
  --DisabledText: #717171;

  /* ── Background ── */
  --Background: #161718;

  /* ── Text ── */
  --Text: #E4E6EB;
  --TextTwo: #B0B3B8;

  /* ── Navigation & Layout ── */
  --Nav: #242526;
  --Section: #242526;
  --Frame: #323436;

  /* ── Icon ── */
  --Icon: #E4E6EB;
  --IconBackground: #3A3B3C;
  --IconBackgroundHover: #4E4E4F;

  /* ── Button ── */
  --Botton: #FFFFFF;
  --BottonText: #FFFFFF;
  --BottonHover: #005ED8;
  --BottonTextHover: #005ED8;

  /* ── Notification ── */
  --Notefication: #E41E3F;

  /* ── Footer ── */
  --FooterText: #F5F5F5;

  /* ── Status ── */
  --Error: #F04248;
  --Success: #00DF80;
  --Alert: #FFD21E;

  /* ── Border ── */
  --Border: #3E3E3E;
  --BorderHover: #65B946;

  /* ── Radio ── */
  --Radio: #B0B3B8;
  --RadioOn: #1877F2;
  --RadioDisabled: #3E3E3F;
  --RadioBack: #3E3E3F;

  /* ── Opacity ── */
  --Opacity20: rgba(0, 0, 0, 0.20);
  --OpacityBorder: rgba(255, 255, 255, 0.10);

  /* ── Selection ── */
  --Select: #0081F1;

  /* ── Social Media ── */
  --facebook: #0866FF;
}

/* ──────────────────────────────────────────────
   System Preference Auto-Detection
   ────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* ── Primary ── */
    --Primary: #1877F2;
    --PrimaryText: #FFFFFF;
    --PrimaryHover: #318BFF;
    --PrimaryDisabled: #80A9DD;

    /* ── Disabled ── */
    --Disabled: #2F3031;
    --DisabledText: #717171;

    /* ── Background ── */
    --Background: #161718;

    /* ── Text ── */
    --Text: #E4E6EB;
    --TextTwo: #B0B3B8;

    /* ── Navigation & Layout ── */
    --Nav: #242526;
    --Section: #242526;
    --Frame: #323436;

    /* ── Icon ── */
    --Icon: #E4E6EB;
    --IconBackground: #3A3B3C;
    --IconBackgroundHover: #4E4E4F;

    /* ── Button ── */
    --Botton: #FFFFFF;
    --BottonText: #FFFFFF;
    --BottonHover: #005ED8;
    --BottonTextHover: #005ED8;

    /* ── Notification ── */
    --Notefication: #E41E3F;

    /* ── Footer ── */
    --FooterText: #F5F5F5;

    /* ── Status ── */
    --Error: #F04248;
    --Success: #00DF80;
    --Alert: #FFD21E;

    /* ── Border ── */
    --Border: #3E3E3E;
    --BorderHover: #65B946;

    /* ── Radio ── */
    --Radio: #B0B3B8;
    --RadioOn: #1877F2;
    --RadioDisabled: #3E3E3F;
    --RadioBack: #3E3E3F;

    /* ── Opacity ── */
    --Opacity20: rgba(0, 0, 0, 0.20);
    --OpacityBorder: rgba(255, 255, 255, 0.10);

    /* ── Selection ── */
    --Select: #0081F1;

    /* ── Social Media ── */
    --facebook: #0866FF;
  }
}